0

Wordpress メニューの「ビルダー」を使用して、次のコードを取得します。

  //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>

4

2 に答える 2

2

次の CSS スニペットを使用します。

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

は>「子コンビネータ」であり、左側のセレクタの直接の子のみを選択します。

子セレクターと兄弟セレクターの優れたまとめについては、こちらを参照してください。

于 2012-04-10T11:25:47.833 に答える
1

.current-menu-ancestor直接にテキスト装飾が必要な場合は、次のように記述します。child

#menu-main-menu .current-menu-ancestor > a { text-decoration: underline; }
于 2012-04-10T11:25:59.833 に答える