Question

据我了解，CSS specificity rules表示伪类与标签选择器具有相同的权重。所以像“div p a”这样的选择器比“a：link”更具体。

但是，正如下面的测试案例所示，情况似乎并非如此。为什么链接是红色的？

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">

    <style type="text/css" media="screen">
        a:link { color: red; }
        div p a { color: green; }
        div.foobar p a { color: green; }
    </style>
</head>
<body>
    <div>
        <p>
          <a href="http://somecrazyurlwierdthing.com">A link... why is it red?</a>  
        </p>
    </div>

    <div class="foobar">
        <p>
          <a href="http://somecrazyurlwierdthing.com">But it turns green when you add a class selector.</a>  
        </p>
    </div>
</body>
</html>

编辑示例以包含“div.foobar p a”选择器。

Answer 1

您链接的规范声明伪类（在本例中为:link）具有比元素名称更高的特异性。确切地说，使用a-b-c-d格式，您的三个选择器如下：

a-b-c-d
0 0 1 1
0 0 0 3
0 0 1 3

您的混淆可能来自您使用术语“伪选择器”，该术语无法识别伪类（如:link）和伪元素（如:first-line）之间的区别。

Answer 2

事情是:link不是像:first-line那样的伪元素，它是一个伪类，因此被视为特殊的类。

Source

Answer 3

每个人的特异性：

a：链接0,0,1,1

div p a 0,0,0,3

a：链接获胜。

为什么：link伪类打破了预期的CSS特异性规则？

3 个答案: