css - CSS:不是伪类

我想将某种样式应用于元素的所有后代，除了某些外。

这是我要实现的示例：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/

NESTED

css - CSS:不是伪类