CSS 选择最后 3 个子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14268156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select the last 3 child elements
提问by Ivo
I know you can select the last child with :last-childor a certain child with :nth-child(if you know their position/number).
我知道你可以选择最后一个孩子:last-child或某个孩子:nth-child（如果你知道他们的位置/号码）。
What I need is to select the last 3 children without knowing how many child elements there could be.
我需要的是在不知道可能有多少子元素的情况下选择最后 3 个孩子。
I know there is something that's called :nth-last-childbut I cant really understand how it is working.
我知道有一些东西叫做，:nth-last-child但我真的不明白它是如何工作的。
For this:
为了这：
<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>
I need something like this:
我需要这样的东西：
#something a:last-child{
/* only now it selects the last <a> and the 2 <a>'s that come before*/
}
回答by Bassam Mehanni
You can read more hereabout nth-last child, but this should basically do the trick of selecting the last 3 children with just CSS
您可以在此处阅读有关第 n 个最后一个孩子的更多信息，但这基本上可以完成仅使用 CSS 选择最后 3 个孩子的技巧
#something a:nth-last-child(-n+3) {
/*declarations*/
}
fiddledemonstration from Fabrício Matté
Fabrício Matté 的小提琴示范
This will only select those rows returning a positive number for out N expression (-n+3), and since we are using nth-last-child, it's counting from last to first, so first rows from bottom gives,
这只会选择那些为 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
everything else will return a negative number
其他一切都将返回负数
回答by praseodym
This is possible with CSS3 selectors and formulas:
这可以通过 CSS3 选择器和公式实现：
.something a:nth-last-child(-n+3) { ... }
You could also try using jQuery (example)or adding a specific class to the last three elements in your server-side code (it does not require JavaScript to be enabled in browsers and also works on older browsers that do not support CSS3).
您还可以尝试使用 jQuery（示例）或在服务器端代码的最后三个元素中添加特定类（它不需要在浏览器中启用 JavaScript，并且也适用于不支持 CSS3 的旧浏览器）。
回答by Richard Buff
The accepted answer has the correct formula, but the explanation is wrong.
接受的答案有正确的公式，但解释是错误的。
So the correct CSS is (same as currently accepted answer):
所以正确的 CSS 是（与当前接受的答案相同）：
#something a:nth-last-child(-n+3) {
/*declarations*/
}
But here is the correct explanation of the math:
但这是数学的正确解释：
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...
