0

WP Web サイトを作成しています。メニュー バーで、アクティブなメニュー項目に下線が引かれています。すべてのメニュー項目 (li) には padding-right が設定されていましたが、アクティブな要素から削除して、下部の境界線がテキストの最後までしか拡張されないようにする必要があります。それを補うために、どうにかして次のリーを狙う必要があるのですが、どうしたらいいのかさっぱりわかりません。私は常に課題である他の誰かのWPテーマのコンテキストで作業していますが、これはおそらく実行可能だと思います.CSSセレクターを組み合わせる方法がよくわかりません. 基本的なメニュー構造は次のとおりです。

<nav id="top-menu">
  <ul id="menu-top">
    <li id="menu-item">
      <a>ITEM 1</a>
    </li>
    <li id="menu-item current-menu-item">
      <a>ITEM 2</a>
    </li>
    <li id="menu-item">
      <a>ITEM 3</a>
    </li>
  </ul>
</nav>

要素のパディングをターゲットにするには、 #top-menu ul > li#current-menu-item > a を使用する必要があります

この例で 3 番目の要素をターゲットにしたい場合、どのコードを使用すればよいでしょうか? これは可能ですか、それとも具体的になりすぎていますか? 子セレクターと子孫セレクターの組み合わせを望んでいますが、すべてを連携させる方法がわかりません。ご協力いただきありがとうございます！

4

3 に答える 3

0

russtuck91が指摘したようにcurrent-menu-item、それはクラスである必要があり、彼の答えは私が実装するものであり、最もクリーンです。

ただし、それを変更できない場合 (id にスペースを入れることができないため、変更する必要があります)、 :nth-child(x) を使用できます。ここで、x は下にある子要素の数です。

#top-menu li:nth-child(3) a {
    color:red;
}

それでもrusstuck91の答えをお勧めします

于 2013-10-04T02:31:31.553 に答える