html - 如何写这个：不是“在其他元素中”CSS规则？

Question

这是html布局

<div class="wrap">
    <div class="section">
        <span class="text">text1</span>
    </div>
    <span class="text">text2</span>
<span class="not-text">don't color me!</span>
</div>

我试图为不在“部分”div中的所有“文本”跨度赋予样式。我试过这个，但它似乎不起作用

.wrap :not(.section) .text 

小提琴

任何帮助是极大的赞赏！

编辑：这种情况有几种解决方法，包括在“.wrap > .text”中使用 > 运算符，但我想知道如何使 :not 选择器工作，以便将来使用它

Answer 1

当您使用 时.wrap :not(.section) .text，这就是您告诉浏览器的内容：

1. 查找具有类的元素.text
2. 它存在于一个没有类的元素中.section
3. 它存在于具有类的元素中.wrap

如果您仔细查看您的标记，您的元素都不符合该选择器标准。

在您提供的标记中，我认为您不能专门选择那些.text不是.sectionusing后代的元素:not()。

最接近的方法是使用直接后代选择器，如下所示：

.wrap > .text

您还可以选择并设置 的所有.text后代.wrap（无论是否直接），然后取消.text内部任何元素的这些样式.section，如下所示：

.wrap .text {
  // your styles here
}

.wrap .section .text {
  // your cancelled styles here
}

Answer 2

您可能可以使用：

.wrap > span
.wrap > *:not(div)
.wrap > *:not(.section)

Answer 3

鉴于 CSS 的约束，最好的选择是为所有文本编写规则，然后将它们覆盖回 .section 中的先前值。所以

.wrap .text {
   // the styles you want
}

.wrap .section .text {
  // styles undoing the styles above... depending on what the styles are it may not always be possible

}