CSS最后奇怪的孩子？

Question

我有一个无序列表，可以包含偶数或奇数个项目。我正在寻找一种仅限CSS的方法，如果li的数量是偶数，则从最后2 li个标签中删除边框。 :last-child伪选择器无论如何都会删除最后一个。

li {
float: left;
border-bottom: 1px solid #000;
}

li:last-child{
border-bottom: none;
}

适用于li s

的奇数

+============================================+
+          1          |          2           +
+--------------------------------------------+
+          3          |                      +
+============================================+

但是对于偶数，我需要删除单元格＃3

的底部

+============================================+
+          1          |          2           +
+--------------------------------------------+
+          3          |          4           +
+---------------------                       +
+============================================+

所以我想我可以使用li:nth-last-child()，但我无法弄清楚应该是什么方法来抓住最后一个奇怪的孩子。

不是2n+1，2n-1，n-1，或者我能想到的任何事情。请帮忙。

Answer 1

n-last-child从最后一个孩子向后计数，所以要抓住倒数第二个，表达式是：

li:nth-last-child(2)

你可以组合伪选择器，以便选择倒数第二个孩子，但只有当它是奇数时，使用：

li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

所以，整个事情应该是：

li:last-child,
li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

回答@ ithil的问题，这是我在SASS写的方式：

li
  &:last-child,
  &:nth-last-child(2):nth-child(odd)
    border-bottom: none

这并不是那么简单，因为选择'倒数第二个奇怪的孩子'总是需要'两步'选择器。

在回答@Caspert的问题时，你可以通过对更多的选择器进行分组来为任意多个最后的元素执行此操作（感觉应该有一些xn+y模式来执行此操作而不进行分组，但AFAIU这些模式只适用于从最后一个元素向后计数）。

最后三个元素：

li:last-child,
li:nth-last-child(2):nth-child(odd),
li:nth-last-child(3):nth-child(odd) {border-bottom: none;}

这是一个像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

Answer 2

另一种选择：

li:last-child:not(:nth-child(odd))

这是一个小提琴：http://jsfiddle.net/W72nR/

Answer 3

可能：

li:nth-child(2n){border:1px dashed hotpink}
li:nth-child(2n-2), li:last-child{border:none;}

Answer 4

这对我有用。动态选择最后一个奇数子代。

li:nth-last-child(1):nth-child(odd)

Answer 5

您可以使用第n个子选择器：

li:nth-child(3) { border-bottom: none;}

li:nth-child(4) {border-bottom: none;}

但是，由于IE 8不支持这个...你应该只为这两个li元素设置一个类，并使用特殊性将border-bottom设置为none。