CSS:not()选择器.如果父项不存在,则应用样式

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>

Answer 2

CSS不能那样做“父查询”。您需要将结构反转为：

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

当然，您需要将共享my-container类添加到所有感兴趣的“父” div中。