：nth-​​last-child选择任意长度列表的后半部分

Question

给定一个任意长度的列表，如何选择列表项的后半部分？

对于我知道列表项数量的列表，我可以使用nth-last-child(-n+x)，其中x是列表项的数量/ 2，例如：

li:nth-last-child(-n+5) {
    color:red;
}

<ul>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
</ul>

但是我怎么做这个我不知道会有多少列表项呢？总会有偶数个列表项。

Answer 1

虽然没有办法覆盖CSS中的所有情况，但您可以覆盖您愿意编写代码的数量。

li:last-child,
li:nth-last-child(2):not(:first-child),
li:nth-last-child(3):not(:nth-child(-n+2)),
li:nth-last-child(4):not(:nth-child(-n+3)),
li:nth-last-child(5):not(:nth-child(-n+4))
/* ...... */
{
  color:red;
}

li:last-child,
li:nth-last-child(2):not(:first-child),
li:nth-last-child(3):not(:nth-child(-n+2)),
li:nth-last-child(4):not(:nth-child(-n+3)),
li:nth-last-child(5):not(:nth-child(-n+4))
/* ...... */
{
  color:red;
}

ul{float:left}

<ul>
    <li>some text</li>
    <li>some text</li>
</ul>
<ul>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
</ul>
<ul>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
</ul>
<ul>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
</ul>
<ul>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
</ul>
<ul>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>(not coded for)</li>
    <li>(this should be red)</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
    <li>some text</li>
</ul>

Answer 2

纯CSS中不可能，如此处已经回答：Selecting half the elements with :nth-child?

如果你不知道你将拥有多少项，你将需要使用JavaScript来选择你想要的一半项目。