CSS 最后一个奇怪的孩子？

Question

我有一个无序列表，其中可以包含偶数或奇数个项目。如果

li

的数量是偶数，我正在寻找一种仅 CSS 的方法来删除最后 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

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

令人惊讶的是，当在 Angular 中使用 ngFor 为 Flex 生成 li 列表时，只有将其应用于 ul 元素，我才能使样式正常工作。

<ul class="ul-class">
    <li class="li-class" *ngFor="let image of this.images;"> 
        <img src="{{image}}" />
    </li>
</ul>

也就是说，当最后一个奇数子元素的高度设置在 ul 元素上时，以下内容有效，但如果设置在 li 元素上，则不起作用。

   `.ul-class {
       list-style: none;
       display: flex;
       flex-flow: row wrap;
       justify-content: space around;
       gap: 2px;
    }
    .ul-class :last-child:nth-child(odd) { /* Doesn't work if this is li-class
        height: 52vh;
    }
    .li-class {   
        height: 25vh;
        flex-grow: 1;
        flex-shrink: 2;
        text-align: center;
    }
    .ul-class img {
        max-height: 100%;
        min-width: 100%;
        object-fit: cover;
    }`

当我检查样式的应用方式时，ul 类高度被应用于最后一个奇数 li 子项！错误还是 for 循环的结果？

Answer 6

这可能是对这个问题的另一种回答，没有完美的方法，有选择器，网格，flex等

但是既然有 Flex 可以轻松做到这一点，我将与您分享我使用 Flex 实现此目的的方法：

li {    
    display: flex;
    margin: auto auto auto 0;
    flex: 1 1 50%;
    justify-content: center;
    max-width: 50%;
}

使用此边距配置，最后一个项目是左居中的，而不是整个容器居中的。 50% 的 flex-basis 和 max-width 将容器分为 2 列。

希望有帮助。

Answer 7

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

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

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

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