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

我想基于其父类将样式应用于div。我使用：not（）选择器来选择父母不是.container1的div，第二个div应该是红色的，但它不起作用。CSS：not（）选择器。如果父类不存在，则应用样式

实施例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？或者我的语法刚刚关闭？

来源

2016-02-19 Hunter Turner

第一个示例是关闭 - '.myDiv：not（.container1）'表示包含其中一个类的元素，但不包含其他类。你基本上试图匹配另一个'.myDiv'的孩子的'.myDiv'。第二个例子恰好是对选择器-4的一个新增加，因此目前还没有得到很好的支持，但一旦这样做，它就会完成你正在做的事情。 – BoltClock

您正在选择错误的元素。没有反向查找可能的，在这里看到：

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>

来源

2016-02-19 15:53:42 Shomz

CSS不能做这样的“父查找”。您将需要结构扭转喜欢的东西：

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

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

来源

2016-02-19 15:52:21

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

回答

相关问题