根据我的理解,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>
Run Code Online (Sandbox Code Playgroud)
编辑示例以包含"div.foobar p a"选择器.
您链接的规范声明伪类(:link在本例中)具有比元素名称更高的特异性.确切地说,使用abcd格式,您的三个选择器如下:
a-b-c-d
0 0 1 1
0 0 0 3
0 0 1 3
Run Code Online (Sandbox Code Playgroud)
您的混淆可能来自您使用术语"伪选择器",它无法识别伪类之间的区别,例如:link伪元素:first-line.