用 :nth-child 选择一半的元素?

2022-01-10 00:00:00 css-selectors html css

以下面的代码为例:

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

相关文章