Question

我如何使用*，但只适用于直接儿童？在这个例子中，我希望它只适用于“Child”div，而不是“孙子（不应该是红色）”div。

我不想为每个“孩子”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

如果您想要直接孩子，请使用child selector：

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 Selectors参考。

element1 > direct-child {
}

Answer 5

如果你想让它在所有浏览器中工作（最值得注意的是IE6）你应该给大孩子divs 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使用的相同示例，只是微调，因此它适用于IE6 http://jsfiddle.net/ajthomascouk/QVhAZ/24/

如何获得除孙子之外的所有子元素

5 个答案: