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

Question

我在 wordpress 中使用菜单，使用 wp-menu。 它会自动生成我的菜单。然后我可以用 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;
}

还有一个 jsfiddle 和我的 html ：

http://jsfiddle.net/JpqNs/

谁能帮我解决这个问题？ 非常感谢

Answer 1

这可以通过使用> 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 <ul> 的直接子元素的 li 元素。这不会影响children的children，比如你layer2的<li>元素<ul>