3

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

在这里查看 Chrome 结果的样子

当我做

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

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

为什么 Chrome 在使用 :after 和 content 时似乎不尊重属性选择器？

4

2 回答 2

5

当我只使用 :after 规则时，我看到了同样的问题。

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

但是，当我添加不带 :after 的规则时，[pdf] 不再位于底部。确实很奇怪。

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

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

看起来这可能是一个chrome bug。:before/:after 不适用于属性选择器，除非该项目已经使用属性选择器设置样式。这是记录的错误。

于 2013-01-14T19:51:33.637 回答
1

这绝对似乎是一个错误。然而，我似乎确实有一种解决方法是使用基本选择器设置一些东西，然后设置之后。因此，例如，这有效：

a[href$=".pdf"] {
  font-size: inherit;
}
a[href$=".pdf"]:after {
  content: "[pdf]";
}
于 2013-01-14T19:57:44.497 回答