如何不应用布尔运算符，以及[重复]

Question

codepen

div:not(.wayne) div:not(.garth) .content {
  background-color:red;
}

 

<div class="wayne">
  <div class="content">Party On Garth</div>
</div>

<div class="garth">
  <div class="content">Party On Wayne</div>
</div>

<div class="Saitama">
  <div class="content">One punch.</div>
</div>

<div class="Naruto">
  <div class="content">Dattebayo</div>
</div>

除非班级是.garth 或.wayne，否则背景应该是红色的。如何为所有 .content 执行此操作？

埼玉和鸣人应该有红色背景。现在没有任何东西有红色背景。任何类似添加的新字符也应具有红色背景。

伪代码 if(!(wayne || garth)){ apply red background to .content}

如有必要，我愿意使用 JavaScript。我更喜欢css。

Answer 1

将:not 链接在一起

div:not(.wayne):not(.garth) .content {
  background-color:red;
}

<div class="wayne">
  <div class="content">Party On Garth</div>
</div>

<div class="garth">
  <div class="content">Party On Wayne</div>
</div>

<div class="Saitama">
  <div class="content">One punch.</div>
</div>

<div class="Naruto">
  <div class="content">Dattebayo</div>
</div>

Answer 2

您正在使用后代组合器：。您的选择器意味着：

“选择每个具有content 类的元素，它是任何div 元素的后代，而没有garth 类，它是任何div 元素的后代，但没有wayne 类。”

删除它。

div:not(.wayne):not(.garth) > .content {
  background-color:red;
}

“选择每个具有 content 类的元素，它是 div 元素的子元素，没有 garth 或 wayne 类。”

Answer 3

如果您想拥有多个 :not 选择器，则需要将 CSS 更改为如下所示

CSS

div:not(.wayne):not(.garth) .content {
  background-color:red;
}

CodePen