Question

我有一些故事链接，其中一些是pdf，其中一些是特别版。特别版在其href中以特别版为前缀。

这是我应用的简化html部分

a[href$=".pdf"]{
 background-color: #ADD8E6 ;
}

.container-node{
 background-color: #32CD32;
}

我需要的是为以扩展名pdf结尾的链接添加背景颜色，但前提是它们不是特殊版本。我可以应用以下css来处理pdf，但这也适用于特殊版链接的问题。我能在这做什么？

{{1}}

Answer 1

您可以简单地使用属性选择器与另一个非属性选择器的组合，如下所示。

a[href$=".pdf"]:not([href*="special-edition"]){
 background-color: #ADD8E6 ;
}

＆＃13;

<!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>

＆＃13;

多条件属性选择器

1 个答案: