如何计算 CSS 选择器的权重？
212009/10
之前在编写 CSS 的时候，多次遇到类选择器“无效”（优先级不够）的情况，例如下面的 HTML 代码： <div class="entry"> <p>段落内容。<a class="links" href="http://fengyouyi.com">链接</a></p> </div> 对应 CSS 代码如下： .entry a { color: red; } .links { color: blue; } 一直以来都简单地按照先后顺序来理解，以为这里链接会呈现蓝色，事实不然。我所理解的先后顺序，只是样式表的层叠顺序。在具体执行时，还需要考虑到样式的权重（原文作 specificity，我个人理解为权重）。 参考官方 CSS2.1 文档中的《6.4.3 Calculating a selector’s specificity》部分，我们可以了解到权重计算遵循以下规则： 如果是通过 ‘style’ 属性声明而不是通过选择器来声明的规则，算作 1，否则为 0 （a 位）（在 HTML 中，一个元素的“style”属性的值是一组样式规则。这些规则没有选择器，所以 a=1、b=0、c=0、d=0）； 计算选择器中的 ID 属性个数（b 位）； 计算选择器中的其它属性（选择器）和伪类个数（c 位）； 计算选择器中的元素名和伪元素个数（d 位）。 这个计算方法仅基于选择器的形式。需要特别说明的是，“[id=p33]”形式的选择器是算作属性选择器的（a=0, b=0, c=1, [...]
