Css 分别自定义菜单的第一级和子级

我正在使用wordpress中的菜单，使用wp菜单。 它自动生成我的菜单。然后我可以用css自定义我的菜单。 我正在尝试分别定制我的第一级li和所有子级li。 例如，我想在我的第一个级别中应用剩余20 px的填充，而在子级别中不应用填充

在本例中，我添加了此代码以在我的第一级菜单的第三个元素之后添加内容，但它被添加到我的所有子级菜单中

ul#menu-menu_top li:nth-child(3):after{content:" | ";color:yellow}

这是我的CSS：

.menu-menu_top-container{background-color: #1C2336}

ul#menu-menu_top, ul#menu-menu_top ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu-menu_top li, ul#menu-menu_top ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
ul#menu-menu_top li:nth-child(3):after{content:" | ";color:yellow}

/*Link Appearance*/
ul#menu-menu_top li a {
    text-decoration: none;
    color: #fff;
    padding: 5px;
    display:inline-block;

    padding-left: 20px;
}

ul#menu-menu_top li {
    position: relative;
}

ul#menu-menu_top li ul.sub-menu {
    display:none;
    position: absolute;
    left: 0;
    width: 100px;
}

ul#menu-menu_top li ul.sub-menu li a{background-color: white;color:#1C2336;width:300px;}
ul#menu-menu_top li ul.sub-menu li a:hover{background-color: #1C2336;color: white}

ul#menu-menu_top li:hover ul.sub-menu {
    display:block;
}

还有一个带有我的html的JSFIDLE：

有人能帮我吗？

---

非常感谢

这可以通过使用>CSS选择器简单地解决。例如，如果您有以下代码：

<ul class="layer1">
    <li>
        Link
    </li>
    <li>
        Link
    </li>
    <li>
        <ul class="layer2">
            <li>
                Link
            </li>
            <li>
                Link
            </li>
        </ul>
    </li>
</ul>

---

您可以使用CSS.layer1>li{YourStylesHere}只影响作为layer1直接子元素的li元素。这不会影响子对象的子对象，例如层2的元素

谢谢@Hiigaran。在我的情况下，我可以使用menu-menu_top>li以我的第一级菜单中的所有li为目标，但我如何从我的子级菜单中获取所有li？我正在尝试menu-menu\u top>.sub-menu>li，但它不起作用。。。非常感谢您使用.sub-menu>li{styles；}。用你的小提琴，我去掉了背景色：白色；从ulmenu-menutop li ul.sub-menu li a，添加.sub-menu>li{background:red；}，效果很好。此外，您不需要使用多个>选择器层，除非您确实需要如此具体。如果你有一些东西因为这个原因不能工作，很可能是因为你有一些其他的CSS阻止或覆盖了它。