CSS选择器 & 选择器的优先级

1.选择器类型

1.1标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 ​

格式: ​ 标签名称{ ​ 属性:值; ​ } ​

注意点: ​ 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 ​ 2.标签选择器无论标签藏得多深都能选中 ​ 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

1.2id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性 ​

格式: ​ #id名称{ ​ 属性:值; ​ } ​

注意点: ​ 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id ​ 2.在同一个界面中id的名称是不可以重复的 ​ 3.在编写id选择器时一定要在id名称前面加上#

1.3类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性 ​

格式: ​ .类名{ ​ 属性:值; ​ }

注意点: ​ 1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名 2.在同一个界面中class的名称是可以重复的 ​ 3.在编写class选择器时一定要在class名称前面加上. ​ 4.类名的命名规范和id名称的命名规范一样

5.在HTML中每个标签可以同时绑定多个类名 ​ 格式: ​ <标签名称 class="类名1 类名2 ..."> ​

错误的写法  ： 

<p class="para1" class="para2">

1.4伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

1.5伪元素选择器

使用伪元素来表示元素中的一些特殊的位置 ​

::after ​

• 表示元素的最后边的部分 ​
• 一般需要结合content这个样式一起使用 ​
• 通过content可以向after的位置添加一些内容

::before ​

• 表示元素最前边的部分 ​
• 一般需要结合content这个样式一起使用， ​
• 通过content可以向before的位置添加一些内容  

1.6属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性

格式: ​ [attribute]

          [attribute=value]

最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

 1.7通配符选择器

作用: 给当前界面上所有的标签设置属性 ​

格式: ​ *{ ​ 属性:值; ​ } ​

注意点: ​ 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上 的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

2.优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定  

2.1优先级判断的三种方式

• 间接选中就是指继承 ​    如果是间接选中, 那么就是谁离目标标签比较近就听谁的
• 相同选择器(直接选中) ​ 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
• 不同选择器(直接选中) ​ 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠 ​ id>类>标签>通配符>继承>浏览器默认

2.2优先级之!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升 为最高

注意点: ​

1. !important只能用于直接选中, 不能用于间接选中 ​
2. 通配符选择器选中的标签也是直接选中的 ​
3. !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 ​
4. !important必须写在属性值的后面，分号前面 ​
5. !important前面的感叹号不能省略 ​
6. 但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

2.3优先级权重

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

权重的计算规则 ​

• 内联样式，如: style="..."，权值为1000。 ​
• ID选择器，如：#content，权值为0100。 ​
• 类，伪类、属性选择器，如.content，权值为0010。 ​
• 标签选择器、伪元素选择器，如div p，权值为0001。 ​
• 通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。 ​
• 继承的样式没有权值

1. 首先先计算选择器中有多少个id, id多的选择器优先级最高 ​
2. 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高 ​
3. 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高 ​
4. 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写 在后面听谁的

    也就是说优先级如果一样, 那么谁写在后面听谁的

注意点: ​

1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的