Wordpress 子主题 CSS 规则 display:none 被覆盖答案

【问题标题】：Wordpress Child Them CSS Rule display:none gets overridenWordpress 子主题 CSS 规则 display:none 被覆盖
【发布时间】：2014-08-04 16:59:40
【问题描述】：

我有这个 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; 规则，因为它更深层次的层次

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

【问题讨论】：

将 !important 添加到您的显示中：无
它被覆盖，因为 display:block; 声明了后者。

标签： css wordpress html-lists

【解决方案1】：

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

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

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

更好的方法是明确解决 sub-menu 类在 CSS 中的 DOM 层次结构中的位置：

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

此指令比仅使用.menu ul 更具体，因此会受到浏览器的青睐。

【讨论】：

【解决方案2】：

只需添加以下css：

ul .submenu {display:none !important;}

它应该可以解决您的问题并覆盖 ul.menu 类

【讨论】：

【解决方案3】：

添加

  hideMenu
  {   
    display:none !important;
  }

当你想隐藏时，使用addClass添加这个类或者只添加属性。

如果您想删除此内容，请removeClass 或删除该属性。

【讨论】：

你的 246K 给我留下了深刻的印象。你编辑了我的答案。很高兴