：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; 
    }