选择最后3个子元素

我知道你可以选择最后一个孩子与 :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*/
}

78727 次浏览

小开

这是可能的 CSS3选择器和公式:

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

您也可以尝试使用 jQuery (示例)或添加一个特定的类到您的服务器端代码的最后三个元素(它不需要在浏览器中启用 JavaScript，也可以在不支持 CSS3的旧浏览器上工作)。

小开

最佳答案

您可以阅读更多关于第 n 个孩子的给你，但是这基本上可以用 CSS 选择最后3个孩子

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

法布里西奥 · 马特(Fabício Matté)演示

这只会选择那些为 out N 表达式(- n + 3)返回正数的行，因为我们使用的是 nth-last-child，所以它从 last 计数到 first, 从底部开始的第一行,

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

其他的都会返回一个负数

小开

公认的答案有正确的公式，但解释是错误的。

因此，正确的 CSS 是(与当前接受的答案相同) :

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

但这里有一个正确的数学解释:

f(n) = -n+3
f(0) = -0+3 = 3 <- 3rd row from the bottom
f(1) = -1+3 = 2 <- 2nd row from the bottom
f(2) = -2+3 = 1 <- 1st row from the bottom
f(3) = -3+3 = 0 <- nothing
f(3) = -4+3 = -1 <- nothing
etc...