CSS :not()选择器。如果父元素不存在，则应用样式

Question

我试图根据父类为其应用样式。我正在使用: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实现？还是我的语法有误？

- Hunter Turner

---

第一个例子完全不对 - .myDiv:not(.container1) 表示包含其中一个类但不包含另一个类的元素。你实际上是在尝试匹配另一个.myDiv的子元素.myDiv。第二个例子恰好是选择器4的新添加，因此目前支持得不太好，但一旦支持，它将完全符合你的要求。 - BoltClock

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>

- Shomz

Answer 2

CSS无法进行“父级查找”，您需要将结构反转为以下形式：

CSS无法进行此类“父级查找”。您需要将结构反转为以下内容：

.my-container:not(.container1) .myDiv

需要注意的是，您需要在所有相关的“父”div中添加共享的my-container类。

- Brian FitzGerald