html - 这个:not "in other element" CSS rule?怎么写

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 

fiddle

非常感谢任何帮助!

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

Answer 1

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

1. 寻找类为.text的元素>
2. 它位于一个没有 .section 类的元素中
3. 住在里面具有 .wrap
类的元素

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

在您提供的标记中，我认为您不能使用 :not( )。

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

.wrap > .text

您还可以选择 .wrap 的所有 .text 后代并设置样式(无论是否直接)，然后取消任何 .text< 的这些样式 .section 中的元素，如下所示:

.wrap .text {
  // your styles here
}

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