CSS：not（）selector。如果父级不存在，请应用样式 [英] CSS :not() selector. Apply style if parent does not exist

问题描述

我想根据其父类应用一个样式到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甚至可能吗？或者是我的语法刚刚关闭？

解决方案

无法反向查找，请参阅此处：

  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>  

b

---

理想情况下，您应该将这些父div归为同一类，以避免超级泛型 div selector：

  .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>  

b

I am trying to apply a style to a div based on its parent class. I am using the :not() selector to select the div whose parent is not .container1, the second div should be red, but it's not working.

Example 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>

Example 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>

Is this even possible with CSS? Or is my syntax just off?

解决方案

You're selecting wrong elements. No reverse lookups possible, see here:

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>

---

Ideally, you'd group those parent divs under the same class in order to avoid the super-generic div selector:

.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>

这篇关于CSS：not（）selector。如果父级不存在，请应用样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！