我有一些故事链接,其中一些是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/

10-09 12:50