我正在阅读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-1a是类型选择器,必须以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

09-17 04:53