css - nth-child 只针对 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)