css选择符权重

发布时间：2023-09-08 10:03:57 所属栏目：语言来源：

导读：css选择符权重是css优先级的核心概念。但在考虑css选择符权重前，请记住，这条优先级原则涉及的样式都是指定义在元素本身的样式。

每一条样式规则的选择符，除了决定这条样式规则会作用到哪些元素之外，选择符也是

css选择符权重是css优先级的核心概念。但在考虑css选择符权重前，请记住，这条优先级原则涉及的样式都是指定义在元素本身的样式。

每一条样式规则的选择符，除了决定这条样式规则会作用到哪些元素之外，选择符也是浏览器判断css规则优先级的参考信息。css选择符权重不是简单的内容，但却可以用简单而直观的方法做阐述。

css选择符权重是一个数字游戏，比的就是谁的计算值更大。权重计算值大的样式规则将有更高的优先级。你可以想象为龙珠里的战斗力测量，在这场权重战争（Specificity Wars，这也是早期的一篇阐述css优先级的文章中用到的词）中，战斗力最强的将取得胜利。

战斗力的测量方法是统计选择符中的不同组成元素的个数，并以 (a,b,c,d) 这种形式来判断。其中，abcd分别代表了不同类别的选择符组成元素，且战斗力分别在不同的数量级，a最强，d最弱。从弱到强，这4个字母分别代表的类别是：

元素选择符（Element），伪元素选择符（Pseudo Element） d = 1 -C (0,0,0,1)
类选择符（Class），伪类选择符（Pseudo class），属性选择符（Attribute） c = 1- (0,0,1,0)
Id选择符 b = 1 - (0,1,0,0)
内联样式（Inline style） a = 1 -(1,0,0,0)

这里的伪元素和伪类做一下补充说明。伪元素选择符，指的是样式作用到的元素不是html结构中的实际元素，即不是真正的dom元素。目前只有:before，:after，:first-line，:first-letter和::selection这5个伪元素选择符。伪类选择符，则是指除前边的这部分选择符之外，在css中加入冒号:的，用于实现动态效果与智能控制的选择符，比如:hover，:nth-of-type(n)。从css3开始，通过区别使用双冒号::来表示伪元素，单冒号:来表示伪类，但为了和以前的浏览器兼容，:after这种诞生于css2的伪类选择符仍然允许使用单冒号的写法。

现在，可以找一些css选择符计算一下了：

看过这些例子后，请理解为，简单的分类计数，正是css中的战斗力测量方法。(a,b,c,d) 这种形式中，abcd分别是不同的数量级，a>b>c>d，和数字的大小比较方法相同，从高位开始，如果高位数字相同，则取低一位数字比较，以此类推。选择符权重计算值最大的样式规则中的属性，覆盖其他的样式规则中的同名属性。

如果你觉得自己计算麻烦，请到Specificity Calculator，这是一个非常棒的计算器。

(a,b,c,d) 中，a代表的内联样式实际是存在于html代码中，只能取值为0或1，所以和其他的较为不同。后边的bcd虽说是不同的数量级，但详细说来有多大差距呢？请看下面这一段Firefox浏览器源代码：

可以看出，class和id对应的十六进制数值之间隔了2位，所以，在Firefox中，要256（162）个class才相当于1个id。在不同浏览器中，这种层级差距，可能有所不同。在写本文的时间点，Opera和Chrome中用256+的class也不能大于id的权重。不过，这些细节信息并不重要，你在实际使用中不可能用到这个数量的选择符。所以，应认为前面所述的权重计算方法是可靠的。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!