如何获取不包括孙子的所有子元素答案

【问题标题】：How to get all child elements excluding grandchildren如何获取不包括孙子的所有子元素
【发布时间】：2011-06-15 17:03:26
【问题描述】：

请看这里：http://jsfiddle.net/QVhAZ/4/

我如何使用* 但它只适用于直系子女？在示例中，我希望它仅适用于“子”divs，而不是“孙子（不应为红色）”divs。

我不想为每个“孩子”div 应用一个类，我想说的是：

div#Root *:depth(1)
{
    color: red;
}

【问题讨论】：

如果您担心 IE6，我会使用我的答案。如果您在 IE6 中检查 @easwee 答案，它将无法正常工作。用我的答案吧。

标签： html css css-selectors pseudo-class

【解决方案1】：

你是说这个吗？

div {margin:20px;}

div#Root > div {color:red;}

div#Root > div > div {color:black;}

http://jsfiddle.net/QVhAZ/20/

同样使用 * 选择器不仅可以选择 div，还可以选择所有元素 - 而且它也慢得多，因为它必须解析所有元素。请注意，颜色仍将由所有子代继承，因此您必须指定要用于所有其余部分的颜色。

【讨论】：

+1 用于性能说明和特定问题的示例。我鼓励您在答案中添加更多细节，以便存档。
@Jason McCreary - 我会，但似乎我无法编辑 - 某些键在编辑器中不起作用 - 稍后再试。
是的，> 选择器正是我想要的。谢谢。

【解决方案2】：

如果你想要直接的孩子然后使用child selector:

div > * {
  /* styles for all direct children of div */
}

注意： color 属性自动级联，所以这变得有点棘手。您将不得不重置孙子的属性（请参阅 easwee 的答案）。但要证明这确实是要走的路，请参阅 border 行为正确 - http://jsfiddle.net/QVhAZ/22/

【讨论】：

【解决方案3】：

试试这个

div#Root > *
{
    color: red;
}

【讨论】：

【解决方案4】：

也许您应该查看CSS Selectors 参考。

element1 > direct-child {
}

【讨论】：

【解决方案5】：

如果你想让它在所有浏览器（最显着的是 IE6）中工作，你应该给大孩子的 div id，这样你就可以关闭孩子给定的任何样式，例如：

HTML

<div>
  <div class="child">
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
  </div>
  <div class="child">
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
  </div>
</div>

风格

.child{margin-left:10px;}
.grandchild{margin-left:0px;}

有点讨厌，但它确实确保它可以在不支持 css 选择器的浏览器中工作，例如 div > *

这是@easwee 使用的相同示例，只是经过tweeked 处理，因此它可以在IE6 http://jsfiddle.net/ajthomascouk/QVhAZ/24/ 中运行

【讨论】：