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

Posted 2023-03-06

【中文标题】如何不应用布尔运算符，以及[重复]

【英文标题】：How to apply boolean operators not, and [duplicate]

【发布时间】：2017-02-24 07:20:05

【问题描述】：

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。

【问题讨论】：

谷歌搜索：site:***.com css multiple not selector

谷歌搜索：div not multiple classes

【参考方案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>

【参考方案2】：

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

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

删除它。

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

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

【参考方案3】：

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

CSS

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

CodePen