：not selector不能按预期工作

Question

所以我有这个：

b:not(.alert-danger) {
  color: #fff;
}

<div class="alert alert-danger" role="alert">
  <h3><b>text</b></h3>
</div>

<h3><b>text2</b></h3>

事情是警报（文本）变白了，我不明白发生了什么。 text2也变白了，但没关系。

我只想在text2上生效，而不是text1。

Answer 1

:not(.alert-danger) > h3 {
  color: #fff
}

<div class="alert alert-danger" role="alert">
  <h3><b>text</b></h3>
</div>
<h3><b>text2</b></h3>

你的选择器：

b:not(.alert-danger) { color: #fff; }

......说：

  

定位b元素，除非它们具有alert-danger类。

这与您的HTML结构不符。另外，您不能在父母身上匹配孩子，因为这不是CSS的工作方式。

修订后的选择器说：

  

定位属于任何元素子元素的h3元素，除非该父元素具有alert-danger类。

如果您愿意，也可以定位b：

:not(.alert-danger) b { color: #fff }