Question

这个小问题让我疯狂，即使它不应该太难实现。

我有以下HTML：

<li id="menu-item-763" class="hide-menu-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-95 current_page_item menu-item-has-children menu-item-763">
<a href="mainmenulink">MAIN MENU LINK</a>
<ul class="sub-menu">
<li id="menu-item-764" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-764">
<a href="submenulink1">SUB MENU LINK 1</a></li> 
</ul>
</li>

现在我要做的是应用可见性：仅隐藏到主菜单链接，而不是隐藏到子菜单。我已经将css类的hide-menu-link应用到主菜单项。我已经尝试了很多，包括：不是选择器，但是像li.hide-menu-link：not（ul.sub-menu li）a {visibility：hidden;不起作用。

任何提示都表示赞赏，我确信解决方案必须非常简单！

Answer 1

使用a选择器选择li.hide-menu-link >的直接后裔：

li.hide-menu-link > a {
    visibility: hidden;
    /* other CSS */
}

这将选择a的直接子项的所有li.hide-menu-link：

<li class="hide-menu-link">
    <a>Will be styled</a> <!-- a direct/immediate descendant -->
    <div>
        <a>Will not be styled</a> <!-- not a direct/immediate descendant -->
    </div>
</li>

有关>选择器的更详细说明：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

这样的事可能吗？

＆＃13;

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

  <title>title
    <style>
      .hide-menu-link a {
        display: none;
      }
      #menu-item-764 a {
        display: block;
      }
    </style>

</head>

<body>
  <ul>
    <li id="menu-item-763" class="hide-menu-link">
      <a href="mainmenulink">MAIN MENU LINK</a>
      <ul class="sub-menu">
        <li id="menu-item-764" class="">
          <a href="submenulink1">SUB MENU LINK 1</a>
        </li>
      </ul>
    </li>
  </ul>



</body>

</html>

＆＃13;

它只隐藏第一个链接。也许您想要将id的使用改为其中一个子链接类

CSS：尝试隐藏主菜单链接但不隐藏子菜单链接

2 个答案: