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中。