CSS not() with attribute selector doesn't seem to work

Question

我有一个非常简单的选择器，但是当将它添加到 a 时，: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()它似乎不起作用。

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

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>