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（）選擇器。如果父類不存在，則應用樣式

回答

相關問題