我有一些故事链接,其中一些是pdf版本,其中一些是特殊版本。特殊版本的href带有特殊版本前缀。
这是我的应用程序的简化的html部分
<div class='container-node'>
<a href='1.pdf'>Story 1</a>
<a href='2.pdf'>Story 2</a>
<a href='3.pdf'>Story 3</a>
<a href='special-edition1.pdf'>Special Edition 1</a>
<a href='4.pdf'>Story 4</a>
<a href='special-edition2.pdf'>Special Edition 2</a>
</div>
我需要为以扩展名pdf结尾的链接添加背景色,但前提是它们不是特殊版本。我可以应用以下CSS处理pdf,但这也适用于特别版链接的问题。我在这里可以做什么?
a[href$=".pdf"]{
background-color: #ADD8E6 ;
}
.container-node{
background-color: #32CD32;
}
最佳答案
您可以简单地将属性选择器与另一个非属性选择器结合使用,如下所示。
a[href$=".pdf"]:not([href*="special-edition"]){
background-color: #ADD8E6 ;
}
<!DOCTYPE html>
<html>
<head>
<style>
a[href$=".pdf"]:not([href*="special-edition"]){
background-color: #ADD8E6 ;
}
.container-node{
background-color: #32CD32;
}
</style>
</head>
<body>
<div class='container-node'>
<a href='1.pdf'>Story 1</a>
<a href='2.pdf'>Story 2</a>
<a href='3.pdf'>Story 3</a>
<a href='special-edition1.pdf'>Special Edition 1</a>
<a href='4.pdf'>Story 4</a>
<a href='special-edition2.pdf'>Special Edition 2</a>
</div>
</body>
</html>
关于javascript - 多条件属性选择器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48413316/