:nth-last-child 到 select 任意长度列表的后半部分

Question

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

对于我知道列表项数的列表，我可以使用 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 来 select 一半您想要的物品。

:nth-last-child 到 select 任意长度列表的后半部分

:nth-last-child to select second half of list of arbitrary length

html

css

css-selectors