Question

我知道你可以用:last-child选择最后的寒意。现在我需要选择最后3个孩子，唯一的问题是孩子的数量不知道所以我不能使用:nth-child，我知道有些东西被称为:nth-last-child但我真的不明白这是怎么回事工作

<div id="something">

    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <!-- here some more

    and than 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 needs to select 2 more a's that are before this child */ 
}

Answer 1

你可以阅读更多关于最后一个孩子的here，但这基本上应该只选择用CSS选择最后3个孩子

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

来自FabrícioMatté

的

fiddle演示

这只会选择那些为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

其他一切都会返回负数

Answer 2

CSS3选择器和formulas可以实现这一点：

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

您还可以尝试using jQuery (example)或在服务器端代码的最后三个元素中添加特定类（它不需要在浏览器中启用JavaScript，也适用于不支持CSS3的旧版浏览器）。

Answer 3

接受的答案具有正确的公式，但解释错误。

因此正确的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...

选择最后3个孩子

3 个答案: