Question

使用Wordpress菜单“builder”，我得到以下代码：

  //Pseaudo code

  <ul id="main-menu-main">
    <li class="menu-item"><a></a></li>
    <li class="menu-item current-menu-ancestor">
      <a></a>
      <ul class="sub-menu">
        <li class="menu-item"><a></a></li>
        <li class="menu-item current-menu-item"><a></a></li>
      </ul>
    </li>
  </ul>


  // and I use the following CSS 
  #menu-main-menu a:hover { text-decoration: underline; }
  #menu-main-menu .current-menu-ancestor a { text-decoration: underline; }

我上一个css行的问题是，a下的所有current-menu-ancestor元素都带有下划线。我只希望current-menu-ancestor中的链接加下划线。

我认为这应该很简单，但现在我的头脑没有集中注意力： - /

父/子的完整代码如下所示：

<ul id="menu-main-menu" class="menu">
  <li id="menu-item-401" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-401">
  <a>menu 1</a>    
  <ul class="sub-menu">
    <li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-415 current_page_item menu-item-444">
    <a> sub 1</a>
    </li>
  </ul>
</li>

Answer 1

使用以下CSS代码段：

#menu-main-menu .current-menu-ancestor > a { text-decoration: underline; }

>是“儿童组合子”，只会选择左侧选择器的直接子节目。

请参阅here，了解儿童和兄弟选择者的精彩综述。

Answer 2

如果您想在 .current-menu-ancestor 上直接child 文字装饰，请按以下方式写一下：

#menu-main-menu .current-menu-ancestor > a { text-decoration: underline; }

如何为父菜单项加下划线而不是儿童？

2 个答案: