html - 如何获取不包括孙子的所有子元素

Question

见这里：http: //jsfiddle.net/QVhAZ/4/

我如何使用*但仅适用于直系子女？在示例中，我希望它仅适用于 "Child" divs，而不是 "Grandchild (should not be red)" divs。

我不想对每个 "child" 应用一个类div，我想说的是：

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

Answer 1

你是这个意思？

div {margin:20px;}

div#Root > div {color:red;}

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

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

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

Answer 2

如果你想要直接的孩子，那么使用孩子选择器：

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

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

Answer 3

试试这个

div#Root > *
{
    color: red;
}

Answer 4

也许您应该查看CSS 选择器参考。

element1 > direct-child {
}

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