据我所知,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”选择器.