奇数时 Select 最后 child ，偶数时 2 最后 child 秒

Question

我处在显示的元素数量可变的情况下，我需要一个我无法实现的奇怪解决方案，我什至怀疑它是否只能通过 css 实现。

如果我的元素数量是奇数，我需要 select last-child，如果元素数量是偶数，我需要最后 2 child。

我一直在尝试 nth-last-child、:not(:nth-last-child())、奇数和偶数，但一直没有找到好的解决方案。

有人 idea/advice 关于在 html 表上添加 class "odd" 之类的问题吗？

非常感谢！

Answer 1

您可以像这样使用 CSS：

li:last-child:nth-child(odd) {
    /* Last child AND odd */
    background: red;
}

li:nth-last-child(2):nth-child(odd),
li:last-child:nth-child(even) {
    /* Before last child AND odd */
    /* Last child AND even */
    background: green;
}

演示：https://jsfiddle.net/hw0ehrhy/

Answer 2

这是一种方法...

.wrap div:last-child,
.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {
    color: red;
}

<div class="wrap">
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
</div>

<hr>

<div class="wrap">
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
</div>

Answer 3

绝对可以做到，纯粹CSS。请参阅下面的完整代码（奇数 child，最后 child 红色；偶数 childs，最后 2 childs 绿色）

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#but1').click(function(){
            var count = $('p').length; 
            if (count%2!=0) {$('div>p:last-child').css('background','red');}
            else {$('div>p:last-child').css('background','green');alert(count);
                $('div>p:nth-last-child(2)').css('background','green');
            }
        });
    });
</script>
</head>
<body>
<button id=but1>Click</button>
<div>
<p>This is one.     </p>
<p> This is two.    </p>
<p> This is three.  </p>
<p> This is four.   </p>
<p> This is five.   </p>
<p> This is six.    </p>
</div>
</body>
</html>

享受编码;)

奇数时 Select 最后 child ，偶数时 2 最后 child 秒

Select last child when odd, 2 last childs when even

css

css-selectors

siblings