-4

次の HTML が与えられた場合、どの CSS ルールが選択し、TWO と書かれた行のみを選択しますか?

<ul class="menu">
  <li><a>void</a></li>
  <li class="active">
    <a>one</a>
    <ul class="sub-menu">
      <li class="active"><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>

次のセレクターは機能しません。

.active:last-of-type {...}

また、サブメニューがない場合、またはサブメニューのリンクがアクティブでない場合は、同じルールで親メニューを選択する必要があることを明確にする必要があります。つまり、次の HTML の場合、同じルールで ONE という行が強調表示されます。

<ul class="menu">
  <li><a>void</a></li>
  <li class="active">
    <a>one</a>
    <ul class="sub-menu">
      <li><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>
4

5 に答える 5

2

両方のユースケースに一致する単一のセレクターステートメントはありません（とにかく、親セレクターがサポートされるまではそうではありません）。.activeたとえば、セレクターがすべての要素に一致することなく要件を満たすために、これらのユース ケースの 1 つに追加のクラスを含める必要があります。

次の使用例を想定しています。

アクティブなサブメニュー要素

<ul class="menu">
  <li class="active"><a>one</a></li>
  <li>
    <ul class="sub-menu">
      <li class="active"><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>

アクティブなサブメニュー要素がありません

<ul class="menu no-active-sub-menu">
  <li class="active"><a>one</a></li>
  <li>
    <ul class="sub-menu">
      <li><a>two</a></li>
      <li><a>three</a></li>
    </ul>
  </li>
</ul>

次のセレクターが機能します。

.menu .sub-menu > .active,
.menu.no-active-sub-menu > .active {
     ...
}
于 2013-08-15T18:35:06.013 に答える
0 
ul > ul > li:first-child

ただし、li 内に子 UL をネストする必要があります。その場合は次のようになります。

ul > li > ul > li:first-child
于 2013-08-15T18:15:52.760 に答える
0

寄稿者の 1 人が提案したように、親は、これを機能させるために、別のクラスを子 (ren) メニュー項目とは別に設定する必要がありました。他の人が同様のことに直面した場合に備えて、私の解決策を投稿しています。

これは、親がアクティブなページである場合の HTML です。

<ul class="menu">
  <li><a>void</a></li>
  <li class="active">
    <a>one (parent, active page)</a>
    <ul class="sub-menu">
      <li><a>two (child)</a></li>
      <li><a>three (child)</a></li>
    </ul>
  </li>
</ul>

これは、親の子メニュー項目がアクティブ ページである場合の HTML です。

<ul class="menu">
  <li><a>void</a></li>
  <li class="active page-parent">
    <a>one (parent)</a>
    <ul class="sub-menu">
      <li class="active"><a>two (child, active page)</a></li>
      <li><a>three (child)</a></li>
    </ul>
  </li>
</ul>

これらは私が使用したルールです：

/* Highlights the parent and any child
   menu item under the parent when the
   parent is the active page. */
ul.menu li.active a {
  color: red;
}

/* Keeps the children menu items normal 
   when the parent is the active page.
   Also keeps the parent normal when a
   child menu item is the active page. */
ul.menu li.active ul.sub-menu li a,
ul.menu li.active.page-parent a {
  color: black;
}

/* Highlights the child menu item that
   is active */
ul.menu li.active.page-parent ul.sub-menu li.active a {
  color: red;
}

子メニュー項目の 1 つがアクティブなときに固有のルールで親状態を特定すると、それは間違いなく簡単です。明らかに、子項目が親から「アクティブ」状態を継承していない場合、これはより簡単になりますが、使用しているメニュー システムはここで説明されているように動作します。貢献してくれた皆さんに感謝します。

注: これは、複数のサブメニュー レベルの深さを含むメニューではテストしていません。

于 2013-08-16T13:21:27.093 に答える