:不是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都是粗体.我事先并不知道可以有多少列.

我尝试过以下使用:not选择器的CSS ,但它渲染了所有粗体:

.container {
  display: flex;
}

.column {
  padding: 0 1em;
}

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

为什么:not选择器不工作？我究竟做错了什么？ 这是一个尝试的jsfiddle.

Answer 1

看到这里.你必须申报这个column班级.

这样做的工作:

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