【CSS】css特殊性-优先级-权重
注：文章来源：《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标签下的内容
|
这时候你可以根据样式定义去查看上面的效果 这时候，就引出一个话题，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，它的优先级甚至 高于 内联样式
但是如果特殊性相等的两个规则同时应用到一个元素会怎么样。那么后面的一个有更高的优先级。
如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后面。
