Question

我找到了一个CSS选择器来选择子li而不是来自父ul的孙子：

parentulid > li

see here

但是如何从顶级父div中选择相同的内容，这样嵌套？

<div id="header">
    <ul id="Head">
        <li>one</li>
        <li>
            two has children
            <ul>
                <li>a</li>
                <li>b</li>
            </ul>
        </li>
        <li>
            three has children
            <ul>
                <li>x</li>
            </ul>
        </li>
    </ul>
</div>

这不起作用：

#header > ul li {
  background-color: rgb(255, 0, 0);
  border-radius: 0px 0px 10px 10px;
}

因为孙子孙也受到影响。

Answer 1

再次使用>，例如#header > ul > li。这只会匹配li的{{1}}个直接后代ul的{{1}}。

Answer 2

您需要再次使用子选择器：

#header > ul > li{
  background-color: rgb(255, 0, 0);
  border-radius: 0px 0px 10px 10px;
}

这将选择所有li个元素，这些元素是任何ul元素的直接子元素，它本身就是#header的直接子元素。您之前的选择器#header > ul li会选择li的直接子项uls的所有ul个后代（包括嵌套#header）。

基本上，#header > ul li会选择任何li作为ul的直接后代（子）的#header的DOM中的后代节点，即使它嵌套在1或2或10个子列表中。相比之下#header > ul > li仅从li中选择直接后代ul元素的直接后代#header元素。

Answer 3

你的意思是这样吗？

#header > ul > li > ul li{
  background-color: rgb(255, 0, 0);
  border-radius: 0px 0px 10px 10px;
}

http://jsfiddle.net/wVMb8/

选择ul li child不是孙子

3 个答案: