CSS最后一个孩子?

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/220086.html

猜你在找的CSS相关文章