*没有选择器不像预期的那样工作

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; }

...is说：

目标b元素，除非它们有一个alert-danger类。

这与HTML结构不匹配。另外，您不能在父级上进行子匹配，因为这不是CSS的工作方式。

修改后的选择者说：

任何元素的子元素的目标h3元素，除非该父元素有一个alert-danger类。

如果您愿意的话，也可以针对b：

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