我想将某种样式应用于元素的所有后代,除了某些外。
这是我要实现的示例:http://jsfiddle.net/f8FLe/
.root * :not(.nested) {
color: green;
}
<div class="root">
<span>Span 1</span>
<div class="nested">
<span>Span 2.1</span>
<span>Span 2.2</span>
</div>
<span>Span 3</span>
</div>
在此示例中,我尝试将所有字体(除属于nested类的div元素的后代以外)都涂成绿色。
为此,我尝试使用“:not”伪元素,但它不起作用。
有人知道为什么吗?
最佳答案
因为您的内部<span>
...他们是:not(.nested)
,因为它们没有该类。
我喜欢做的一件事-特别是关于列表,是这样的:
<ul class="root">
<li>Item 1</li>
<li>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
通过这种结构(顺便说一下,它与您所拥有的结构非常相似),您可以执行以下操作:
.root>li {color:green}
.root ul>li {color:blue} /* nested list */
/* you can also do... */
.root>li>ul>li {color:red} /* specifically one level of nesting */
关于css - CSS:不是伪类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22688921/