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 孩子的信息，但这基本上应该可以使用 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（示例）或在服务器端代码的最后三个元素中添加特定类（它不需要在浏览器中启用 JavaScript，也适用于不支持 CSS3 的旧浏览器）。

于 2013-01-10T22:11:44.237 回答
5

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

所以正确的 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...
于 2019-01-31T14:54:04.523 回答