怎么写这个:不是"in other elements"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 selector工作,以便将来使用它

Answer 1

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

1. 查找具有类的元素 .text
2. 它生活在一个没有一类的元素里面 .section
3. 它生活在一个有一类的元素里面 .wrap

如果仔细查看标记,则没有任何元素符合选择标准.

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

你可以得到的最接近的是使用直接后代选择器,如下所示:

.wrap > .text

你也可以选择和设置所有.text后代.wrap(无论是否直接),然后为其中的任何.text元素取消这些样式.section,如下所示:

.wrap .text {
  // your styles here
}

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