仅在最后位置选择奇数元素而不是唯一的子元素

时间:2017-01-20 14:15:13

标签: css css3 css-selectors

我需要将最后一个元素定位为奇数。

让我说我有3个元素。我想只针对第3个元素,因为它的最后一个和它的奇数。但是,如果我有1个元素,我不希望这个规则适用,即使这实际上是奇数也是如此。

1 2 3(target)

1 2 3 4 5(target)

1 2(don't target)

1(don't target)

我怎么能做到这一点?

所以我基本上想要合并:nth-child(odd):not(:only-child),只有在适用的情况下才会合并。

3 个答案:

答案 0 :(得分:10)

我认为你的意思是你要选择一个元素

  • 最后一个孩子
  • 不是唯一的孩子

将所有这些结合起来相当简单:

:nth-child(odd):last-child:not(:only-child) {
    color: blue; // or whatever
}

答案 1 :(得分:5)

有多种方法可以做到这一点,如果对您来说很重要,具有不同程度的特异性。

正如lonesomeday已经提出的,具有特异性(0,3,0)(3个伪类,其中:not(:only-child):only-child同等):

:nth-child(odd):last-child:not(:only-child)

另一个,具有特异性(0,2,0):

:nth-child(2n+3):last-child

表达式2n + 3从第3个孩子开始匹配,无需:not(:only-child)。 (相比之下,“odd”关键字相当于2n + 1.)

答案 2 :(得分:-2)

应该做魔术,你可以不使用,作为选择器

target:not(:first-child):last-child { /*some magic css*/ }