67

:last-child私はあなたが最後の子供または特定の子供を選択できることを知っています:nth-child（あなたが彼らの位置/番号を知っている場合）。

必要なのは、子要素がいくつあるかを知らずに、最後の3つの子を選択することです。

呼ばれるものがあることは知っていますが:nth-last-child 、それがどのように機能しているかを本当に理解することはできません。

このため：

<div id="something">

    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <!-- More elements here -->
    <!-- ..... -->
    <!-- I need to select these: -->
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>

</div>

私はこのようなものが必要です：

#something a:last-child{
   /* only now it selects the last <a> and the 2 <a>'s that come before*/ 
}
4

3 に答える 3

166

ここで nth-last child について詳しく読むことができますが、これは基本的に CSS だけで最後の 3 つの子を選択するトリックを行うはずです。

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

Fabrício Matté によるフィドルのデモンストレーション

これは、out N 式 (-n+3) に対して正の数を返す行のみを選択し、nth-last-child を使用しているため、最後から最初にカウントされるため、下から最初の行が得られます。

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

それ以外はすべて負の数を返します

于 2013-01-10T22:14:21.253 に答える
10

これは、CSS3 セレクターと数式で可能です。

.something a:nth-last-child(-n+3) { ... }

また、jQuery を使用する (例)か、サーバー側コードの最後の 3 つの要素に特定のクラスを追加することもできます (ブラウザーで JavaScript を有効にする必要はなく、CSS3 をサポートしない古いブラウザーでも機能します)。

于 2013-01-10T22:11:44.237 に答える