CSS Adam Freeman 书中的特异性查询

Question

我正在阅读 Adam Freeman 的 "The Definitive Guide to 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>

并指出：

In this case, the selector a.myclass includes a class attribute, which means that the specificity of the style is 0-1-0 (0 id values + 1 other attributes + 0 element names). The other style has a specificity of 0-0-0 (that is, it contains no id values, other attributes or element names).

我原以为 "a.myclass" 选择器的特异性得分为 0-1-1，因为它包括 both a class 和一个元素。同样，我希望 "a" 选择器的分数为 0-0-1。将这两个选择器输入 CSS Specificity Calculator 确实会产生我期望的结果。（除了这个计算器在分数中包含内联样式）

谁能解释 Adam 的评论，或者我应该将其报告为勘误表？

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

CSS Adam Freeman 书中的特异性查询

CSS specificity query from Adam Freeman's book

html

css

css-selectors

css-specificity