html - 带有属性选择器的 CSS not() 似乎不起作用

Question

我有一个非常简单的选择器可以工作，但是当将它添加到 :not() 时，它似乎不再识别它。

h2:not([random-attribute~="value"] h2){
  color: red;
}
[random-attribute~="value"] h2{
  color: blue;
}

<div class="content">
  <h2>Same valid selector, not working</h2>
  <div random-attribute="value">
      <h2>Valid selector turned blue.</h2>
  </div>
</div>

据我了解，如果您在 not() 中放置一个有效的选择器，您将得到任何 h2 元素，该元素 not 无论如何在括号内。这是直观的。

不直观的是，not() 中的选择器在单独使用时有效且有效，但当添加到 not() 时它不起作用' 似乎工作。

这不是一个有效的写法吗？

Answer 1

您需要设置所有 h2 元素的样式，这些元素是不是 [random-attribute~="value"] 的元素的后代，然后设置 h2 那是。

用直接子组合器限定选择器也没有坏处。

像这样:

*:not([random-attribute~="value"]) > h2 {
  color: red;
}
[random-attribute~="value"] > h2 {
  color: blue;
}

<div class="content">
  <h2>Same valid selector, not working</h2>
  <div random-attribute="value">
    <h2>Valid selector turned blue.</h2>
  </div>
</div>

<h2>some other heading</h2>