：CSS中沒有選擇器

Question

我需要在HTML文檔的所有元素（除嵌套在特定類中的元素除外）中對文本進行樣式設置。我無法控制HTML，我只能修改CSS。

這裏是一段代碼：

<div class="container"> 
    <div class="column c1"> 
    <div class="text"> 
     text in column 1 
    </div> 
    </div> 
    <div class="column c2"> 
    <div class="text"> 
     text in column 2 
    </div> 
    </div> 
    <div class="column c3"> 
    <div class="text"> 
     text in column 3 
    </div> 
    </div> 
</div> 

我希望所有text元件，除了在一個c1元件的那些，是粗體。我事先不知道有多少列。

我試過下面的CSS，它利用了:not選擇的，但它使一切大膽：

.container { 
    display: flex; 
} 

.column { 
    padding: 0 1em; 
} 

:not(.c1) .text { 
    font-weight: bold; 
} 

爲什麼沒有:not選擇工作？我究竟做錯了什麼？ Here is a jsfiddle試試。

Answer 1

這是因爲:not(.c1)將選擇不具有類的元素。那也可以是.container。

要麼添加一個直接子組合子：

:not(.c1) > .text { 
    font-weight: bold; 
} 

或者使用其他類以及：

.column:not(.c1) .text { 
    font-weight: bold; 
} 

Answer 2

您只需要從後代切換到子組合器。

換句話說，從這個：

:not(.c1) .text 

要這樣：

:not(.c1) > .text 

revised fiddle

---

你的選擇......

:not(.c1) .text { 
    font-weight: bold; 
} 

等效於此：

*:not(.c1) .text { 
    font-weight: bold; 
} 

這個選擇表示：

選擇具有text類的元件是任何其它元件的後代，除了與c1類的元件。

好吧，.text是c1類div的一個實例–後代，因此被排除在外，因爲你打算。但.text也是html,body和.container的後裔。因此，該規則無法按預期工作，因爲它滿足多種場景。

相反，試試這個：

:not(.c1) > .text { 
    font-weight: bold; 
} 

這個選擇說：

選擇與text類元素時父元素不具備類c1。

Answer 3

請參閱here。您必須申報column課程。

這做工作：

.column:not(.c1) .text { 
    font-weight: bold; 
} 

Answer 4

這工作太：

.column:not(.c1) .text { 
     font-weight: bold; 
    }