問題描述

我有一個無序列表，它可以包含偶數或奇數個項目.如果 li 的數量是偶數，我正在尋找一種純 CSS 方法來從最后 2 個 li 標記中刪除邊框.:last-child 偽選擇器無論如何都會刪除最后一個.

I have an unordered list, which can contain either an even or odd number of items. I'm looking for a CSS-only way to remove the border from the last 2 li tags if the number of lis is even. The :last-child pseudo-selector removes the last one regardless.

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() 但我無法弄清楚抓住最后一個奇數孩子的方程式應該是什么.

So I figured I could use li:nth-last-child() but I can't figure out what should be the equation to grab the last odd child.

這不是 2n+1、2n-1、n-1 或任何我能想到的.請幫忙.

It's not 2n+1, 2n-1, n-1, or anything I can think of. Please help.

推薦答案

nth-last-child 從最后一個child倒數，所以要搶倒數第二個，表達式為:

nth-last-child counts backwards from the last child, so to grab the second to last, the expression is:

li:nth-last-child(2)

您可以組合偽選擇器，因此要選擇倒數第二個孩子，但只有當它是奇數時，使用:

You can combine pseudo-selectors, so to select the 2nd to last child, but only when it's odd, use:

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

所以，整個事情應該是:

And so, the whole thing should be:

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

在回答@ithil 的問題時，這是我在 SASS 中的寫法:

In answer to @ithil's question, here's how I'd write it in SASS:

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

這并沒有那么簡單，因為選擇倒數第二個奇數孩子"總是需要兩步"選擇器.

It's not that much simpler, since the selection of the 'second-to-last odd child' is always going to require the 'two step' selector.

在回答@Caspert 的問題時，您可以通過對更多選擇器進行分組來對任意多個最后元素執行此操作(感覺應該有一些 xn+y 模式可以在不分組的情況下執行此操作，但是 AFAIU這些模式只是通過從最后一個元素倒數來工作).

In answer to @Caspert's question, you can do this for arbitrarily many last elements by grouping more selectors (there feels like there should be some xn+y pattern to do this without grouping, but AFAIU these patterns just work by counting backwards from the last element).

對于最后三個元素:

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

這是一個像 SASS 這樣的東西可以幫助生成選擇器的地方.我會將其構建為占位符類，并用它擴展元素，并在變量中設置列數，如下所示:

This is a place where something like SASS can help, to generate the selectors for you. I would structure this as a placeholder class, and extend the element with it, and set the number of columns in a variable like this:

$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

這篇關于CSS 最后一個奇怪的孩子?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！