CSS :not() selector. 如果父项不存在则应用样式

Question

我正在尝试将样式应用于基于其父类的 div。我正在使用 :not() 选择器来选择父级不是 .container1 的 div，第二个 div 应该是红色的，但它不起作用。

示例 1

.myDiv:not(.container1) > .myDiv {
  color: red;
}

<div class="container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container2">
  <div class="myDiv">Div 2</div>
</div>

示例 2

.myDiv:not(.container1 .myDiv) {
  color: red;
}

<div class="container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container2">
  <div class="myDiv">Div 2</div>
</div>

这甚至可以用 CSS 实现吗？还是我的语法不对？

Answer 1

您选择了错误的元素。不可能进行反向查找，请参见此处:

div:not(.container1) > .myDiv {
  color: red;
}

<div class="container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container2">
  <div class="myDiv">Div 2</div>
</div>

---

理想情况下，您会将这些父 div 分组在同一类下，以避免使用超通用的 div 选择器:

.container:not(.container1) > .myDiv {
  color: red;
}

<div class="container container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container container2">
  <div class="myDiv">Div 2</div>
</div>