nth-child仅针对儿童

Question

<ul id="main-menu">
    <li>111
        <ul id="sub-menu">
            <li>sub-111</li>
            <li>sub-222</li>
            <li>sub-333</li>
            <li>sub-444</li>
        </ul>
    </li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>


<style>
    ul#main-menu li:nth-child(2n) {
        color: red;
    }
</style>

这是一个演示 http://cssdeck.com/labs/emxvbal4

这也会影响子项!!

如何在不触及子菜单的li的情况下仅定位主菜单的li

Answer 1

使用child combinator（>）代替descendant one（）：

ul#main-menu > li:nth-child(2n)

Answer 2

使用直接子选择器：

#main-menu > li{
}

Answer 3

使用直接儿童选择器＆＃34;＆gt;＆＃34;。

ul#main-menu > li {
    <your_css_style>
}

有关详细信息，请查看此LINK。