3

这是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 选择器工作,以便将来使用它

4

3 回答 3

5

当您使用 时.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
}
于 2013-02-14T23:42:33.540 回答
1

您可能可以使用:

.wrap > span
.wrap > *:not(div)
.wrap > *:not(.section)
于 2013-02-14T23:09:58.973 回答
0

鉴于 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

}
于 2013-02-15T00:01:16.777 回答