CSS最后一个孩子？

我有一个无序的列表，可以包含偶数或奇数个项目。我正在寻找一个CSS的唯一方式，以从最后2 li标记删除边框，如果lis的数量是偶数。 ：last-child伪选择器删除最后一个。

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

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

适用于奇数

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

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

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

所以我想我可以使用li：nth-​​last-child()但我不知道应该是什么应该是抓住最后一个奇怪的孩子。

它不是2n 1，2n-1，n-1，或任何我可以想到的。请帮忙。

解决方法

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

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

原文地址：https://www.jb51.cc/css/220086.html