为什么 :link 伪类会破坏 CSS 特异性规则？

Question

为什么 :link 伪类会破坏 CSS 特异性规则？

6

据我理解，CSS优先级规则表明伪类与标签选择器的权重相同。因此，像“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"选择器。

- timmfin

3个回答

5

事实上，:link 不像 :first-line 那样是一个伪元素，而是一个伪类，因此在特异性方面算作一个类。

来源: 链接

- Gab Royer

这就是为什么CSS规范的新版本使用::来区分伪元素和伪类，而不是使用:。 - Paul d'Aoust

2

每个选择器的优先级：

a:link 0,0,1,1

div p a 0,0,0,3

a:link 胜出。

- Rob Flaherty

根据上面的CSS规范链接： "li:first-line /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */"除非规范存在错字或者":first-line"比":link"不够具体，否则"a:link"应该是0,0,0,2。 - timmfin

1

请看我的回答，:first-line 是一个伪元素，而不是伪类！ - Gab Royer

正如Gab所说，:link是一个伪类。a:link的特异性为0,0,1,1。 - Rob Flaherty

这似乎是一个简短而直接的好答案，但这些四个数字集合是什么？ - DarenW

1

达伦 - 特异性的计算是一个由4个值组成的数组。第一个值奖励内联样式的特异性，第二个值奖励ID选择器的特异性，第三个值奖励类选择器的特异性，第四个值奖励元素选择器的特异性。这些值从左到右以权重递减的方式下降。因此，具有0,0,1,0特异性的ID选择器将击败具有5个元素简单选择器的选择器0,0,0,5。玩弄特异性计算器是了解特异性如何工作的最好方法：http://www.suzyit.com/tools/specificity.php - Rob Flaherty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NickFitz · Accepted Answer

您链接的规范指出，伪类（在这种情况下是:link）比元素名称具有更高的特异性。准确地说，使用a-b-c-d格式，您的三个选择器如下：

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

你的困惑可能来自于你使用了“伪选择器”这个术语，它没有区分像:link这样的伪类和像:first-line这样的伪元素。请注意，它们是不同的概念。