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

您选择了错误的元素。无法进行反向查找，请参见此处：

＆＃13;

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

＆＃13;

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

＆＃13;

理想情况下，您要将这些父div分组到同一个类下，以避免使用超级通用div选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

CSS：not（）选择器。如果父项不存在，则应用样式

2 个答案: