11

CSSでは、ボディからすべての:last-childを再帰的に選択することは可能ですか?

このマークアップを考えると:

<body>
  <div id="_1">
    <div id="_2"></div>
  </div>
  <div id="_3">
    <div id="_4">
      <div id="_5"></div>
      <div id="_6"></div>
    </div>
  </div>
</body>

div番号を探しています。3、4、6

それを置く別の方法は次のとおりです。

body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
  /* My stuff here */
}

しかし、明らかにこれは良いアプローチではありません。

4

3 に答える 3

7

いいえ、残念ながら、HTML を変更せずにそれを行う唯一の方法です。

および疑似クラスの再帰バージョンに対する少なくとも 1 つの要求がありましたが、あまり支持されていないようです。質問と同じ方法で疑似クラスをネストして繰り返すことを提案していることに注意してください。:first-child:last-child

現在、知る限り、事前に知られている正確なネスト レベル (下の例では 3)までの子のみを照合できます。

.container > :first-child,
.container > :first-child > :first-child,
.container > :first-child > :first-child > :first-child {}

最初の子ではないブロックの最初の子も選択するため、:first-child コンテキスト セレクターだけを使用することはできません。

したがって、最後の子の最初だけでなく、ネストレベルに関係なく、最初と最後のすべての要素に再帰的に一致する一種の再帰セレクターが必要です。

于 2012-09-18T13:03:23.900 に答える
0

ずっとチェーンする必要はありません。単純にこういうことだろう

div:last-child {
   /* Your GREAT css */
}

デモ

更新:その場合、div2典型的なクラスを指定し、使用:not()して選択範囲から押し出します

div:last-child:not(.nolist) {
    border: 1px solid red;
}

デモ

于 2012-09-18T12:46:17.760 に答える