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

时间:2022-10-19
本文介绍了用 :nth-child 选择一半的元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

以下面的代码为例:

<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 选择一半的元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一条:XPath 还是 querySelector? 下一条:值等于 A 或 B 的属性选择器?

相关文章

最新文章