CSS :not pseudo class

Question

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

这是我正在尝试实现的示例: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>

在此示例中，我尝试将所有字体着色为绿色，除了那些属于具有“嵌套”类的 div 元素的后代的字体。

为此，我尝试使用“:not”伪元素，但它不起作用。有人知道为什么吗？

Answer 1

因为你的内心<span> s...他们是:not(.nested) ，因为他们没有那个类(class)。

我喜欢做的一件事——尤其是列表，是这样的:

<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 */