问题描述
以下面的代码为例:
<ul>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
</ul>
是否有可能，使用 :nth-child() 或其他方式，准确选择总元素的 一半?代码应该在上面的实例中选择第一个/最后一个 两个 lis，然后如果我将 lis 的数量增加到六个，它将选择第一个/最后一个三个.
Is it possible, using :nth-child() or otherwise, to select exactly half of the total elements? The code should select the first/last two lis in the above instance, then if I were to increase the number of lis to six, it would select the first/last three.
我觉得我将不得不使用 JavaScript...
I feel I'm going to have to use JavaScript...
推荐答案
在纯 CSS 中接近的唯一方法是在任一 nth-child(odd) 或 nth-child(even).如果你想要准确的后半部分(而不是奇数或偶数)，那么你必须使用 JavaScript/jQuery.
The only way you'd be able to get anywhere near to that in pure CSS is to do a selector on either nth-child(odd) or nth-child(even). If you want exactly the last half (and not either odd or even), then you'd have to use JavaScript/jQuery.
使用 jQuery，您可以使用:
Using jQuery, you could get them using:
var yourList = $("ul li");
yourList = yourList.slice(0, Math.floor(yourList.length/2));
这篇关于用 :nth-child 选择一半的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！