Question

我有以下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链接时它不会消失。

see what the Chrome result looks like here

当我做的时候

a[href$=".pdf"]{
    color: red;
}

pdf链接为红色，而非pdf链接为红色，即使在Chrome中也是如此。

为什么Chrome在使用以下内容时似乎不尊重属性选择器：after和content？

Answer 1

如果我有fiddle with just the :after rule，我会看到同样的问题。

a[href$=".pdf"]:after{
    content: "[pdf]";
}

然而，当我add the rule without :after时，[pdf]不再位于底部。确实很奇怪。

a[href$=".pdf"]:after{
    content: "[pdf]";
}

a[href$=".pdf"]{
    color: red;
}

似乎这可能是chrome bug。：before /：after不使用属性选择器，除非该项已经使用属性选择器设置样式。 Here's the logged bug

Answer 2

这肯定是一个错误。但是，我似乎确实想要使用基本选择器设置某些东西，然后设置after。例如，this works：

a[href$=".pdf"] {
  font-size: inherit;
}
a[href$=".pdf"]:after {
  content: "[pdf]";
}

CSS属性选择器+之后：在Chrome中无效？

2 个答案: