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> ...他们是: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 */

Answer 2

关于继承和关于兄弟姐妹的正确标签。

你规则说，如果class =。嵌套，不要应用颜色。

在div.nested里面，你有2个没有上课的跨度。要么不在标记http://jsfiddle.net/f8FLe/6/中包装文本，要么将嵌套类赋予每个不想应用颜色http://jsfiddle.net/f8FLe/5/的标记。

.root * :not(.nested) {
    color: green;
}

游乐场HTML：

<div class="nested">
        <span>not nested</span><!-- green -->
        nested<!-- not green -->
        <span class="nested"> nested</span><!-- not green -->
        <span class="nested"> nested</span><!-- not green -->
         nested
    </div>

答案 2 :(得分：0)

使用您的标记结构我会使用以下内容：

.root *{
    color: green;
}
.nested span{
    color: black;
}

http://jsfiddle.net/f8FLe/7/

您的问题是span .nested包含的.nested {{1}}课程（正如Niet the Dark Absol所说）

答案 3 :(得分：0)

这有效：http://jsfiddle.net/f8FLe/8/

.root > *:not(.nested) {
    color: green;
}

Answer 3

使用您的标记结构我会使用以下内容：

.root *{
    color: green;
}
.nested span{
    color: black;
}

http://jsfiddle.net/f8FLe/7/

您的问题是span .nested包含的.nested {{1}}课程（正如Niet the Dark Absol所说）

Answer 4

这有效：http://jsfiddle.net/f8FLe/8/

.root > *:not(.nested) {
    color: green;
}

CSS：不是伪类

4 个答案: