我正在阅读Adam Freeman的“ HTML5权威指南”,并且对CSS特殊性有疑问。他给出了以下示例:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
color: black;
}
a.myclass {
color: white;
background: grey;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
并指出:
在这种情况下,选择器a.myclass包含一个class属性,该属性
表示样式的特异性是0-1-0(0个id值+ 1
其他属性+ 0个元素名称)。其他样式有特殊性
的0-0-0(即不包含id值,其他属性或
元素名称)。
我希望“ a.myclass”选择器的特异性得分为0-1-1,因为它既包含类又包含元素。同样,我希望“ a”选择器的得分为0-0-1。在这CSS Specificity Calculator中输入这两个选择器确实会产生我期望的结果。 (除了此计算器在分数中包含内联样式)
谁能解释亚当的评论,还是我应该把它报告为勘误表?
最佳答案
你是对的。 a.myclass
选择器的特异性得分为0-1-1
。 a
是类型选择器,必须以1计分。
请检查w3.org的特异性示例:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
参考:w3.org - Calculating a selector's specificity