如何获得不包括孙子代的所有子元素

问题描述

| 看到这里：http://jsfiddle.net/QVhAZ/4/ 如何使用

*

，但仅适用于直系子女？在示例中，我希望它仅适用于\“ Child \”

div

，而不适用于\“孙子（不应为红色）\1ѭs。 我不想为每个“孩子”

div

上一堂课，我想说的是：

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

    

解决方法

        你是这个意思？

div {margin:20px;}

div#Root > div {color:red;}

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

http://jsfiddle.net/QVhAZ/20/还使用*选择器不仅可以选择div，还可以选择所有元素-而且它还要慢很多，因为它必须解析所有元素。请注意，颜色仍将由所有子级继承，因此您必须指定要用于所有其他颜色的颜色。     ,        尝试这个

div#Root > *
{
    color: red;
}

    ,        如果要直接子代，请使用子代选择器：

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

注意：

color

属性会自动级联，因此变得有些棘手。您将必须为孙辈重置属性（请参阅easwee的答案）。但是要证明这确实是正确的方法，请参见“ 9”行为正确-http://jsfiddle.net/QVhAZ/22/     ,        也许您应该查看CSS选择器参考。

element1 > direct-child {
}

    ,        如果您希望它在所有浏览器（最著名的是IE6）中都可以工作，则应给大孩子divs ids，这样您就可以关闭孩子中给出的任何样式，例如： 的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使用的同一示例，仅使用了tweek，因此它可以在IE6中使用http://jsfiddle.net/ajthomascouk/QVhAZ/24/