CSS 最后一个奇怪的孩子?

问题描述

我有一个无序列表，它可以包含偶数或奇数个项目.如果 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模板网！