CSS属性选择器+之后:在Chrome中无效？
Pet*_*ott 3 html css google-chrome css3
我有以下css/html
<!DOCTYPE html>
<html>
<head>
<style>
a[href$=".pdf"]:after{
content: "[pdf]";
}
</style>
</head>
<body>
<p>This is an example <a href="helloworld.pdf">Text with a pdf link</a></p>
<p>This is an example <a href="helloworld.png">Non PDF link</a></p>
</body>
</html>
当我在IE8中打开它时,它按预期工作:PDF链接后面添加了文本,而PNG没有.当我在Chrome 23.0.1271.97中打开它时,两个链接都将[pdf]附加到结尾.更奇怪的是,当我点击非pdf链接时,点击时最后的[pdf]会消失,而点击PDF链接时它不会消失.
当我做
a[href$=".pdf"]{
color: red;
}
pdf链接为红色,而非pdf链接为红色,即使在Chrome中也是如此.
为什么Chrome在使用时似乎不尊重属性选择器:after和content？
当我有一个小提琴只有:后规则,我看到同样的问题.
a[href$=".pdf"]:after{
content: "[pdf]";
}
但是当我添加规则时没有:之后,[pdf]不再位于底部.确实很奇怪.
a[href$=".pdf"]:after{
content: "[pdf]";
}
a[href$=".pdf"]{
color: red;
}
看起来这可能是一个铬虫.:before /:after不使用属性选择器,除非该项已经使用属性选择器设置样式.这是记录的错误.