3

ここでかなり厄介な CSS に入ります。以下のシナリオでは、#4 のみを一致させたいと考えています。これは私が行っていることです：

<ul class="tabMenu">
  <li class="hidden">1</li>
  <li class="active">2</li>
  <li class="hidden">3</li>
  <li>4</li> <!-- I want this one's blood -->
  <li class="hidden">5</li>
  <li class="hidden">6</li>
  <li>7</li>
  <li class="hidden">8</li>
  <li>9</li>
</ul>

失敗している私の試みは次のとおりです。

/* Only matches the next immediate li (so it works if #3 is not hidden) */
.tabMenu li:not(.hidden).active + li:not(.hidden) a {
  color: red;
}

/* Matches #4 and #7, I just want #4 */
.tabMenu li:not(.hidden).active ~ li:not(.hidden) a {
  color: red;
}

これで30分後、私の問題をあなたに持ち込むことにしました。助けてください！

4

1 に答える 1

11

ここでは、CSS 兄弟セレクターの機能を利用する方法を利用します。

  • ステップ 1:クラスoractiveを含まない最初の要素の後のすべての要素の選択を実行しましょう。hiddenactive

    li.active ~ li:not(.hidden):not(.active) {
    color:red;
}

  • ステップ 2:ターゲット要素の後のすべての兄弟のターゲットを削除します。CSS セレクターは、その後に続く~すべての兄弟要素を選択し、それを含めません。したがって、ターゲットの後の要素に適用することで、ステップ 1 でターゲットにされた最初の要素を除くliすべての要素から正常に削除されます。

    li.active ~ li:not(.hidden):not(.active) ~ li {
    color:inherit;
}

http://jsfiddle.net/nJHd2/でこれが起こっているのを見てください。

于 2013-07-05T17:25:15.427 に答える