什么是CSS选择器权重？
即使在不太复杂的样式表中，要寻找同一元素可能有两个或者更多规则，当同一元素被多个不同来源的样式规则设置了样式后，如何处理样式规则的冲突，显示元素最后的样式，用到的计算规则就是CSS选择器的权重规则。
根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。
特殊性
为了计算规则的特殊性，给每种选择器都分配一个数字值。然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。特殊性的计算不是以10为技术的，而是采用一个更高的未指定的基数。这能确保非常特殊的选择器（比如ID选择器）不会被大量一般选择器（比如类型选择器）所超越。但是，为了简化，如果在一个特定选择器中的选择器数量少于10个，那么可以以10为基数计算特殊性。
选择器的特殊性分成4个成分等级：a, b, c 和 d。
- 如果样式是行内样式，那么a=1
- b等于ID选择器的总数
- c等于类,伪类和属性选择器的数量
- d等于类型选择器和伪元素选择的数量
使用这些规则可以计算任何CSS选择器的特殊性。下面的表格给出了一系列选择器以及相应的特殊性。
| 选择器 | 特殊性 | 以10为技术的特殊性 |
|---|---|---|
| Style=" " | 1,0,0,0 | 1000 |
| #wrapper #content {} | 0,2,0,0 | 200 |
| #content .name {} | 0,1,1,0 | 110 |
| div#ontent {} | 0,1,0,1 | 101 |
| #content {} | 0,1,0,0 | 100 |
| p.comment .name {} | 0,0,2,1 | 21 |
| p.comment {} | 0,0,1,1 | 11 |
| div p {} | 0,0,0,2 | 2 |
| p {} | 0,0,0,1 | 1 |
用style属性编写的规则总是比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。如果两个规则的特殊性相同，那么后定义的规则优先。
原文地址：https://www.cnblogs.com/nanxia/p/8411992.html
时间： 2024-09-29 15:25:56