CSS属性选择器+之后：不在Chrome中工作？

我有以下的CSS/HTMLCSS属性选择器+之后：不在Chrome中工作？

<!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时似乎不尊重属性选择器？

来源

2013-01-14 Peter Elliott

为什么你需要“$”？ – ATOzTOA

'href $ ='匹配href属性的末尾，所以它只匹配以.pdf结尾的网址 –

这是为了确保.pdf在语句的末尾，尽管我从来没有见过它在css中使用过。我有使用n-child类的Chrome问题，所以我不惊讶它有这个问题。你的代码看起来合法。 – Leeish

当我有一个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。：之前/：之后不使用属性选择器，除非该项目已使用属性选择器进行了样式化。 Here's the logged bug。

来源

2013-01-14 19:51:33 idrumgood

同意，我得出了同样的结论。直接电话的介绍似乎可以纠正它。 – ScottS

我担心这可能是一个Chrome/Webkit的bug，看起来像是底层的bug已经修复了。谢谢您的帮助！ –

它绝对似乎是一个错误。不过，我确实看到，一个解决方法是使用基本选择器设置，然后设置后。因此，例如，this works：

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

来源

2013-01-14 19:57:44 ScottS

CSS属性选择器+之后：不在Chrome中工作？

回答

相关问题