Fatal编程技术网
  • css/
  • 为什么：link伪类破坏了预期的CSS专用性规则？

为什么：link伪类破坏了预期的CSS专用性规则？

css

为什么：link伪类破坏了预期的CSS专用性规则？,css,css-selectors,Css,Css Selectors,据我所知，这表明伪类与标记选择器具有相同的权重。所以像“divpa”这样的选择器比“a:link”更具体 但正如下面的测试用例所示，情况似乎并非如此。为什么链接是红色的 <!DOCTYPE HTML> <html> <head> <title></title> <meta charset="UTF-8"> <style type="text/css" media="screen">

据我所知，这表明伪类与标记选择器具有相同的权重。所以像“divpa”这样的选择器比“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 p a{颜色：绿色；}
div.foobar p{color:green；}
编辑示例以包含“div.foobar p a”选择器。

每个选项的特殊性：

a:链接0,0,1,1

分区p a 0,0,0,3

答：link获胜。

问题是
：link
不像
：first-line
那样是一个伪元素，它是一个伪类，因此被视为特殊性的类

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

a-b-c-d
0 0 1 1
0 0 0 3
0 0 1 3
根据上面的CSS规范链接，“li:first-line/*a=0b=0c=0d=2->specificity=0,0,0,2*”，使用术语“pseudo selector”可能会造成混淆，它无法识别伪类（如
：link
）和伪元素（如
：first-line
）之间的区别除非规范有输入错误或“：first-line”不如“：link”具体，否则I“a:link”应该是0,0,0,2。请看我的答案，：first-line是一个伪元素，而不是伪类！正如Gab所说：link是一个伪类。a:link的特异性是0,0,1,1。这似乎是一个很好的简明扼要的答案，除了这四个数字的集合是什么？Darren-特异性是以4个值的数组计算的。第一项奖励内联样式的特殊性，第二项奖励ID选择器，第三项奖励类选择器，第四项奖励元素选择器。从左向右移动时，这些值的权重会下降。因此，特异性为0,0,1,0的ID选择器将击败具有5元素简单选择器0,0,0,5的选择器。使用专用性计算器是了解专用性如何工作的最好方法：是的，我没有意识到伪选择器和伪类之间有区别。也许伪类具有更高权重是有原因的，但至少在我的例子中，它似乎使编写通用的“a:link”样式更加困难。我想我会把我正在编辑的wordpress模板改为使用“a{color:XXX}”，而不是“a:link{color:XXX”请记住，<代码> < /COD>元素不必是链接；它可以是锚，而是通过URL片段链接。这是<>代码>链接> <代码>和相关的伪类的主要原因：允许<代码> a < /COD>元素，这些链接是区别于非链接的元素。-类（
：链接
，
：访问
，
：悬停
，
：焦点
和
：活动
）为了通过反映用户与页面/站点的交互状态来提高可用性，我自己特别不喜欢有大量链接的页面，这些链接没有为
：访问的
：定义不同的样式。这就是为什么CSS规范的较新版本使用
：：
而不是
：来区分伪元素和伪类的原因：
。