CSS常用-----选择器及样式

忘是亡心i 2022-06-08 07:16 291阅读 0赞

本章仅仅只是对CSS的一个汇总，方便查询使用

--------------------

# 1. 什么是CSS？ #

CSS 指层叠样式表 (Cascading Style Sheets)，他的作用是为了显示HTML元素，优点在于让定义样式更加简单，让网页的内容和表现分离，使多个样式可以层叠使用。

CSS的使用格式是选择器+声明
    Selector{Declaration;Declaration}
    P{
        font-family:"楷体";
    }

在这里临时插入CSS的三个特点：

## 1.继承 ##

1.当给父元素设置一些属性，子元素（所有后代）也可以使用  
（这里注意，

*  color/font/text/line开头的属性才可以继承
 *  a标签中的文字颜色和下划线不可继承
 *  h标签的文字大小不能继承

）

## 2.层叠 ##

层叠是指当有多个选择器给同一个标签设置了相同属性的时候，会选择优先权高的

## 3.优先级 ##

优先级是针对多选一时的解决方案，多选择器对同一标签同一属性进行选择时的解决。  
即针对于层叠。

<table> 
 <thead> 
  <tr> 
   <th align="center">判断方式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">继承</td> 
   <td align="center">谁最近听谁的</td> 
  </tr> 
  <tr> 
   <td align="center">同类型选择器直接选中</td> 
   <td align="center">谁在后面听谁的</td> 
  </tr> 
  <tr> 
   <td align="center">不同类型选择器直接选中</td> 
   <td align="center">按照选择器优先级：id&gt;类&gt;标签&gt;通配符&gt;继承&gt;浏览器</td> 
  </tr> 
 </tbody> 
</table>

(小知识：我们可以在**属性后面**，**分号前面**使用！important来提升某个属性的优先级到**最大**，important只可以对**直接选中**有效)

例如：  
\{color:red !important;\}

# 2. CSS选择器 #

## 1. id选择器 ##

根据指定的ID找到对应的标签，然后设置样式

#id{ 
            属性：值;
            }
            //注意点：
            //1.同一个界面，id不可重复
            //2.注意#号
            //3.id不可是数字，不可使HTML标签，只可是数字，字母，下划线
            //4.id一般给JS使用

## 2. class选择器 ##

根据指定的类名找到对应的标签

.类名{
            属性:值;
            }
            //注意点：
            //1.每个标签都可设置类名
            //2.类名可重复
            //3.注意加上点
            //4.注意命名规范，和id一样
            //5.类名是专门针对css的
            //6.每个标签可以有多个类名，中间用空格分开

什么是类，类就是带有类似样式的标签，所以要学会抽取公共类，将一个类绑定给标签，类似于先想好类，再赋予标签，这更符合样式与代码分离，更加简单高效。
    
        而id呢，就是先有标签，然后专门为其赋予样式

## 3. 标签选择器 ##

根据指定标签的名称，在当前页面查找所有该名称的标签，然后设置属性

标签名称{
        属性：值;
        }
        //注意点：
        //1.标签选择器选中的是所有标签
        //2.无论标签多深都能选中
        //3.任何HTML标签均可以

## 4.其他选择方式 ##

下面以表格列举其他的选择方式，其实就是一种组合

<table> 
 <thead> 
  <tr> 
   <th align="center">名称</th> 
   <th align="center">格式</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">后代选择器</td> 
   <td align="center">标签1 标签2{属性：值;}</td> 
   <td align="center">特点是</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center">1.中间使用空格，会查询后面所有的</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center">2.可以用空格一直延续下去</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center">3.后代选择器理解为在什么下面查找某个选择器 ，所以后面的可以是标签选择器，也可以是其他选择器</td> 
  </tr> 
  <tr> 
   <td align="center">子元素选择器</td> 
   <td align="center">标签1&gt;标签2{属性：值；}</td> 
   <td align="center">特点是：</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center">1.只会查找儿子，不会查找其他，即下一个</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center">2.后面可以是其他选择器</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center">3.可以使用&gt;一直延续</td> 
  </tr> 
  <tr> 
   <td align="center">交集选择器</td> 
   <td align="center">选择器1选择器2{属性：值；}</td> 
   <td align="center">相交的标签，可以是3种选择器任何一种</td> 
  </tr> 
  <tr> 
   <td align="center">并集选择器</td> 
   <td align="center">选择器1，选择器2{属性：值；}</td> 
   <td align="center">多个选择器选择的标签同时设置，相当于两个选择器选中的都设置</td> 
  </tr> 
  <tr> 
   <td align="center">相邻兄弟选择器</td> 
   <td align="center">选择器1+选择器2{}</td> 
   <td align="center">后面紧跟的那个</td> 
  </tr> 
  <tr> 
   <td align="center">通用兄弟选择器</td> 
   <td align="center">选择器1~选择器1{}</td> 
   <td align="center">后面所有的</td> 
  </tr> 
  <tr> 
   <td align="center">序选择器：同级别第几个</td> 
   <td align="center">选择器：first/:last/:nth/:nth-last/:only-child{}</td> 
   <td align="center">同级别第一，最后，第几个,倒数第几个,父元素中唯一的那个</td> 
  </tr> 
  <tr> 
   <td align="center">序选择器：同级别同类型第几个</td> 
   <td align="center">选择器：first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-child-of-type{}</td> 
   <td align="center">同级别同类型第一，同类型最后，同类型第几个,同类型倒数第几个,同类型父元素中唯一的那个</td> 
  </tr> 
  <tr> 
   <td align="center">序其他</td> 
   <td align="center">odd/even/xn+y</td> 
   <td align="center">奇数标签/偶数标签/公式</td> 
  </tr> 
  <tr> 
   <td align="center">属性选择器</td> 
   <td align="center">选择器 [属性]{}</td> 
   <td align="center">通过选择器+属性，所有带某个属性的元素，例如img[alt]{},所有带alt属性的img元素</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">选择器[属性][属性]{}</td> 
   <td align="center">所有带有两个属性的元素</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">选择器[属性=值]{}</td> 
   <td align="center">属性等于某个值的元素</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">选择器[属性^=值]{}</td> 
   <td align="center">属性的取值以value开头的元素</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">选择器[属性^=值]{}</td> 
   <td align="center">属性的取值以value开头的元素</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">选择器[属性*=值]{}</td> 
   <td align="center">属性的取值包含value的元素</td> 
  </tr> 
  <tr> 
   <td align="center">通配选择器</td> 
   <td align="center">*{}</td> 
   <td align="center">所有标签</td> 
  </tr> 
 </tbody> 
</table>

子元素选择器和兄弟选择器的区别在于：前者是里面的，后者是后面的

# 3. CSS的使用 #

CSS的使用可以理解为怎样把CSS样式放入网页中
            CSS插入样式表的方式主要有三种

## 1. 外部样式表（External style sheet） ##

外部的嘛，就是与我们的HTML文件想分离，然后再在HTML页面中导入的一种方式，优点在于可以实现了真正的分离，可以在多个页面中使用听一个样式表

## 2. 内部样式表（Internal style sheet） ##

内部，顾名思义，就是将我们的CSS样式定义在HTML文件中

<head>
        <style> h{ color：red; } </style>
    </head>

## 3. 内联样式（Inline style） ##

内联样式可以理解为一个临时的只针对某一个的样式表

//注意，**内联样式没有大括号**

*  这里有一点可以提一下：