爲什麼：不工作？

我想將樣式應用於所有文本，但 .grid下的文本除外。爲什麼它應用呢？ PS。我不能依靠.grid作爲父項的直接子項。在實際的網站中它是動態的，並且必須更一般。爲什麼：不工作？

.amn_main_panel :not(.grid) { 
 
    color: red; 
 
}

<div class="amn_main_panel"> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 

 

 
    <div class="grid"> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 
    </div>

來源

2017-07-31 janeh

您需要刪除的類名之間的空間：不 – Gerard

網格是一個孩子'.amn_main_panel'的div都將繼承紅色您當前的定義。刪除空間不會做任何事情@Gerard – Huangism

是的，刪除空間意味着處理.amn_main_panel.grid，但這不是我所擁有的。 – janeh

.amn_main_panel > div:not([class="grid"]) { 
 
    color: red; 
 
}

<div class="amn_main_panel"> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 

 

 
    <div class="grid"> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 
    <div>hi</div> 
 
    </div> 
 

 
</div>

來源

2017-07-31 17:35:47 Gerard

:not(.grid)裝置

「也就是不網格類的成員的任何元素」

這並不意味着「任何不是來自網格類的成員的元素」。

<div class="grid"> <!-- This element does not get the color --> 
    <div>hi</div> <!-- This element does get the color. It is :not(.grid) -->

你可以帶着孩子的組合子取代你的後裔組合子：

.amn_main_panel > :not(.grid) {

然後：

<div class="grid"> <!-- This element does not get the color because of the :not --> 
    <div>hi</div> <!-- This element does not get the color because it isn't a child of amn_main_panel -->

...但是這將取決於您的標記是相當正是你在你的例。

來源

2017-07-31 17:36:01 Quentin

.amn_main_panel > div:not(.grid) { 
    color: red; 
}

完全是你想要的。我建議你再看看你的HTML，因爲這就是你最終使用如此複雜的選擇器的原因。

這表示下一個選擇器需要是直系後代（子代）。

來源

2017-07-31 17:38:02 Cherna

孩子總是立竿見影。沒有其他種類。 – Quentin

錯，孩子總是孩子。此選擇器僅適用於IMMEDIATE子項，這意味着它們不會相對於其父項嵌套多次。 – Cherna

你似乎混淆了孩子與各種各樣的後代。雖然我是我祖父的孫子，但沒有人會把我當成自己的孩子。 CSS中使用了相同的術語。該規範提及[後代]（https://www.w3.org/TR/css3-selectors/#descendant-combinators）和[兒童]（https://www.w3.org/TR/css3-selectors/#兒童組合者），但從來沒有使用短語「直接的孩子」 – Quentin

在.grid下的子div元素被選中的不是:(。grid）並被繪製爲紅色。

實現你的目標，你可以給選擇一些情況下，像這樣

.amn_main_panel > :not(.grid) { 
    color: red; 
}

這裏我們規定只有那些.amn_main_panel的兒童：不是（.grid）獲得紅色造型。

https://jsfiddle.net/34mpxabs/

來源

2017-07-31 17:41:11 luckyape

爲什麼：不工作？

回答

相關問題