CSS最后一个孩子？ [英] CSS Last Odd Child?

问题描述

我有一个无序列表，可以包含偶数或奇数个项目。如果 li li > s是偶数。 ：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 ，或任何我能想到的。请帮忙。

解决方案

nth-last-child从最后一个子节点向后计数，所以要从第二个到最后一个节点， / p>

  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：nth-​​last-child（2）：nth-​​child（odd），
 li：nth-​​last-child（3） } 
  
这是一个类似SASS的地方可以帮助你生成选择器。我将它构造为一个占位符类，并用它扩展元素，并设置变量中的列数，如下所示：
  $ number-of-columns：3 
 
％no-border-on-last-row 
 @for $ i从1到$ number-of-columns 
& ;：nth-​​last-child（$ i）：nth-​​child（odd）
 border-bottom：none 
 
 //然后，在布局中使用它， b 
 $ b .column-grid-list li 
 @extend％no-border-on-last-row 
  
 
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;
}


Works for Odd Numbers of lis

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


But for even numbers, I need to remove the bottom of cell #3

+============================================+
+          1          |          2           +
+--------------------------------------------+
+          3          |          4           +
+---------------------                       +
+============================================+
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. 

It's not 2n+1, 2n-1, n-1, or anything I can think of. Please help. 
解决方案
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;}
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.

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). 

For three last elements:
li:last-child,
li:nth-last-child(2):nth-child(odd),
li:nth-last-child(3):nth-child(odd) {border-bottom: none;}
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最后一个孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！