CSS属性选择器+之后：在Chrome中无效？
[英]CSS attribute selector + after: Not Working in Chrome?
问题描述
I have the following css/html 
我有以下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>
when I open this in IE8 , it works as expected: the PDF link gets text added after, and the PNG does not. 当我在IE8中打开它时，它按预期工作：PDF链接后面添加了文本，而PNG没有。 When I open it in Chrome 23.0.1271.97 however, both links get [pdf] appended to the end. 当我在Chrome 23.0.1271.97中打开它时，两个链接都将[pdf]附加到结尾。 Even stranger, when I click on the non-pdf link, the [pdf] at the end goes away while clicking, while it does not disappear when clicking on the PDF link. 更奇怪的是，当我点击非pdf链接时，点击时最后的[pdf]会消失，而点击PDF链接时它不会消失。
when I do 当我做
a[href$=".pdf"]{
color: red;
}
the pdf link is red while the non-pdf one isn't, even in Chrome. pdf链接为红色，而非pdf链接为红色，即使在Chrome中也是如此。
Why does Chrome seem to not respect the attribute selector when using :after and content? 为什么Chrome在使用时似乎不尊重属性选择器：after和content？
2 个解决方案
解决方案1
5 已采纳 2013-01-14 19:51:33
When I have a fiddle with just the :after rule , I see the same issue. 当我有一个小提琴只有：后规则 ，我看到同样的问题。
a[href$=".pdf"]:after{
content: "[pdf]";
}
However when I add the rule without :after , the [pdf] is no longer on the bottom one. 但是当我添加规则时没有：之后 ，[pdf]不再位于底部。 Strange indeed. 确实很奇怪。
a[href$=".pdf"]:after{
content: "[pdf]";
}
a[href$=".pdf"]{
color: red;
}
It seems like this may be a chrome bug . 看起来这可能是一个铬虫 。 :before/:after don't work with attribute selectors unless the item is already styled with an attribute selector. ：before /：after不使用属性选择器，除非该项已经使用属性选择器设置样式。 Here's the logged bug . 这是记录的错误 。
解决方案2
1 2013-01-14 19:57:44
It definitely seems to be a bug. 这肯定是一个错误。 I does seem, however, that one work around is to set something using the base selector, then set the after. 但是，我确实看到一个解决方法是使用基本选择器设置一些东西 ，然后设置后面。 So for instance, this works : 例如， 这有效 ：
a[href$=".pdf"] {
font-size: inherit;
}
a[href$=".pdf"]:after {
content: "[pdf]";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.