Question

我正在阅读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中输入这两个选择器确实产生了我期望的结果。（除了此计算器在乐谱中包含内联样式）

任何人都可以解释亚当的评论，还是应该将其作为勘误报告？

Answer 1

你是对的。 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

Adam Freeman的书中的CSS特异性查询

1 个答案: