css - 主菜单影响子菜单

Question

我将边框样式应用于我的主菜单 li。但我的子菜单 li 也受到主菜单 li 样式的影响。这是示例代码，请让我知道如何解决此问题。

ul.menu li {
        border-left:1px solid #fcfcfc;
        border-right:1px solid #e8e8e8;
    }

上面的样式也呈现在我的子菜单 li 上。我不想使用 class 或 id 我想直接标记样式。有什么办法可以停止在我的子菜单上呈现边框。

    ul.menu ul li {
         min-width: 200px;

    }

Answer 1

如果您只想影响<ul>with 类的直接子级menu，则需要使用此选择器：

ul.menu > li {
    ...
}

所以如果你有这个结构：

<ul class="menu">
    <li>One</li>
    <li>Two
        <ul>
            <li>Three</li>
        </ul>
    </li>
</ul>

<li>然后这将使用内容 1 和 2 设置元素的样式，但不会<li>使用 3 设置子菜单。