Css 第n个孩子只针对孩子

这是一个演示

这也会影响子项

如何仅针对主菜单的li而不触摸子菜单的li

使用>而不是：

ulmain menu>li:nth-child2n

---

使用直接子项选择器：

<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>

---

使用直接子项选择器>

#main-menu > li{
}

有关更多信息，请查看此

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