css - Wordpress 子主题 CSS 规则显示 :none gets overriden

Question

我有这个 DOM 树:

<ul id="menu-horizontalnav" class="menu">

    <li id="menu-item-19">

        <ul class="sub-menu">
            <li id="menu-item-99" ></li>

        </ul>
    </li>

</ul>

现在我想要 <ul class="sub-menu">并且他的子内容是隐藏的。我在 style.css 文件中添加了一个新的 .css 规则:

但如您所见，它被这条规则覆盖了:

如果我停用 display: block;一切正常。

我的问题是如何添加仅对 class="sub-menu" 有效的 .css 规则没有让规则覆盖此规则 .menu ul

根据我对 .css 规则的理解 display: none;规则应该覆盖 display: block;规则，因为它在 hiracy 中更深层次

我在子主题的 style.css 文件中添加了我的代码

Answer 1

一种简单的方法是通过将其标记为重要来覆盖 CSS 规则:

.sub-menu {
    display: none !important;
}

但是对于various reasons，应该尽可能避免这种技术。 .

更好的方法是在您的 css 中明确说明 sub-menu 类在 DOM 层次结构中的位置:

.menu ul.sub-menu {
    display: none;
}

此指令比仅使用 .menu ul 更具体，因此将被浏览器首选。