CSS 最后一个奇怪的孩子？

Question

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

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

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

适用于lis 的奇数

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

但对于偶数，我需要删除单元格 #3 的底部

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

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

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

Answer 1

nth-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 元素设置一个类，并使用特异性将边框底部设置为无。