【CSS】css特殊性-优先级-权重

古城微笑少年丶 2022-09-26 14:54 195阅读 0赞

注：文章来源：《css权威指南》 第三章。 部分未予记录

css选择器可以用多种方式去选择元素，实际上一个元素可以由使用两个或者多个规则来匹配，每个规则都有各自的选择器。请看例子

CSS:

h1 {color: red;}
          body h1 {color: green;}
    
          h2.grade {color: purple;}
          h2 {color: silver}
    
          然后是特别长的一个选择器
          html > body table tr[id="totals"] td ul > li {color: marron}
          li#answer {color: lightblue}

各自的效果：

# 这是h1标签下的内容 #

## 这是h2标签下的内容 ##

<table style="color:rgb(0,0,0);font-family:'PingFang SC';font-size:13px;"> 
 <tbody> 
  <tr> 
   <td> 
    <ul> 
     <li style="margin-top:5px;">li的Content</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

这时候你可以根据样式定义去查看上面的效果 **这时候，就引出一个话题**，css特殊性(权重)，大白话就是根据某一种规则，谁的优先级高谁就能够决定选中元素的样式显示。  
但是这并不是解决冲突的全部，实际上所有样式冲突的解决都有层叠来决定（后续）。

###  ###

选择器的特殊性是由选择器本身的构成\[css权威指南写作组件\]来确定，特殊值由四个组成部分，如 0，0，0，0，一个选择器的具体特殊性或者权重的计算 如下：

*  对于选择器中给定的各个ID属性值，加 0, 1, 0, 0   
    \-----什么意思 就比如说上面的例子: **li\#answer 就符合规则， li\[id="answer"\] 不符合规则**
 *  对于选择其中给定的各个 类属性值，属性选择 或者 伪类, 加 0, 0, 1, 0  
    \-----还是拿上面的例子：** tr\[id="totals"\] 符合了属性选择 这一项 ; 类属性值长这样 selector.className ; 伪类自行脑补**
 *  对于选择器中给定的 各个元素 和 伪元素, 加 0，0，0，1   
    \-----依旧使用上面的例子: **html > body table tr\[id="totals"\] td ul > li \{color: marron\} 一共7个元素，并且没有伪元素，所以符合规则，加 0, 0, 0, 7**
 *  最后一点：结合符和通配选择器 对特殊性没有任何效果。   
    \----- **+ > 以及\* 对特殊性没有作用**

###  ###

这时候我们来计算上面的几个的选择器的权重值

h1 {color: red;}          0, 0, 0, 1
          body h1 {color: green;}   0, 0, 0, 2
    
          h2.grade {color: purple;} 0, 0, 1, 1 
          h2 {color: silver}        0, 0, 0, 1
    
          然后是特别长的一个选择器
          html > body table tr[id="totals"] td ul > li {color: marron}  0, 0, 1, 7
          li#answer {color: lightblue}                                  0, 1, 0, 1

###  ###

你可能会奇怪，计算这个特殊性（权重）的时候为什么 第一个位置的值始终为0呢 ？ 一般情况下，第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。但是请注意关键字!important，它的优先级甚至 高于 内联样式

###  ###

但是如果特殊性相等的两个规则同时应用到一个元素会怎么样。那么后面的一个有更高的优先级。   
如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后面。