CSS 最后一个奇数孩子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8641003/
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
CSS Last Odd Child?
提问by KyleWpppd
I have an unordered list, which can contain either an even or odd number of items. I'm looking for a CSS-only way to remove the border from the last 2 litags if the number of lis is even. The :last-childpseudo-selector removes the last one regardless.
我有一个无序列表，它可以包含偶数或奇数个项目。li如果lis的数量是偶数，我正在寻找一种仅使用 CSS 的方法来从最后 2 个标签中删除边框。在:last-child不考虑伪选择删除最后一个。
li {
float: left;
border-bottom: 1px solid #000;
}
li:last-child{
border-bottom: none;
}
Works for Odd Numbers of lis
适用于奇数的lis
+============================================+
+ 1 | 2 +
+--------------------------------------------+
+ 3 | +
+============================================+
But for even numbers, I need to remove the bottom of cell #3
但是对于偶数，我需要删除单元格 #3 的底部
+============================================+
+ 1 | 2 +
+--------------------------------------------+
+ 3 | 4 +
+--------------------- +
+============================================+
So I figured I could use li:nth-last-child()but I can't figure out what should be the equation to grab the last odd child.
所以我想我可以使用，li:nth-last-child()但我无法弄清楚抓住最后一个奇怪孩子的方程式应该是什么。
It's not 2n+1, 2n-1, n-1, or anything I can think of. Please help.
这不是2n+1, 2n-1,n-1或我能想到的任何东西。请帮忙。
回答by Ben Hull
nth-last-child counts backwards from the last child, so to grab the second to last, the expression is:
nth-last-child 从最后一个孩子开始倒数，所以要抓取倒数第二个，表达式是：
li:nth-last-child(2)
You can combine pseudo-selectors, so to select the 2nd to last child, but only when it's odd, use:
您可以组合伪选择器，以便选择倒数第二个孩子，但仅当它很奇怪时，请使用：
li:nth-last-child(2):nth-child(odd) {border-bottom: none;}
And so, the whole thing should be:
所以，整件事应该是：
li:last-child,
li:nth-last-child(2):nth-child(odd) {border-bottom: none;}
In answer to @ithil's question, here's how I'd write it in SASS:
为了回答@ithil 的问题，以下是我在 SASS 中的编写方式：
li
&:last-child,
&:nth-last-child(2):nth-child(odd)
border-bottom: none
It's not that much simpler, since the selection of the 'second-to-last odd child' is always going to require the 'two step' selector.
它并没有那么简单，因为选择“倒数第二个奇数孩子”总是需要“两步”选择器。
In answer to @Caspert's question, you can do this for arbitrarily many last elements by grouping more selectors (there feels like there should be some xn+ypattern to do this without grouping, but AFAIU these patterns just work by counting backwards from the last element).
在回答@Caspert 的问题时，您可以通过对更多选择器进行分组来为任意多个最后一个元素执行此操作（感觉应该有一些xn+y模式可以在不分组的情况下执行此操作，但 AFAIU 这些模式只是通过从最后一个元素向后计数来工作）。
For three last elements:
对于最后三个元素：
li:last-child,
li:nth-last-child(2):nth-child(odd),
li:nth-last-child(3):nth-child(odd) {border-bottom: none;}
This is a place where something like SASS can help, to generate the selectors for you. I would structure this as a placeholder class, and extend the element with it, and set the number of columns in a variable like this:
这是一个像 SASS 这样的东西可以帮助你生成选择器的地方。我会将其构建为占位符类，并用它扩展元素，并在变量中设置列数，如下所示：
$number-of-columns: 3
%no-border-on-last-row
@for $i from 1 through $number-of-columns
&:nth-last-child($i):nth-child(odd)
border-bottom: none
//Then, to use it in your layout, just extend:
.column-grid-list li
@extend %no-border-on-last-row
回答by Andrew Odri
Another alternative:
另一种选择：
li:last-child:not(:nth-child(odd))
Here is a fiddle: http://jsfiddle.net/W72nR/
这是一个小提琴：http: //jsfiddle.net/W72nR/
回答by Philip
possibly:
可能：
li:nth-child(2n){border:1px dashed hotpink}
li:nth-child(2n-2), li:last-child{border:none;}
回答by user3225723
This works for me. Dynamically select the last odd child.
这对我有用。动态选择最后一个奇数孩子。
li:nth-last-child(1):nth-child(odd)
回答by Michael Rader
you can use the nth child selector:
您可以使用第 n 个子选择器：
li:nth-child(3) { border-bottom: none;}
li:nth-child(4) {border-bottom: none;}
However since this is not supported in IE 8... you should just set a class to those two li elements and use specificity to set the border-bottom to none.
然而，由于这在 IE 8 中不受支持......你应该只为这两个 li 元素设置一个类，并使用特异性将边框底部设置为无。
