html - 仅后半部分子元素的不同背景

Question

如何只为子元素的后半部分设置不同的背景颜色？例如看下图:

还有我的 HTML 代码:

<div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

不幸的是我不能给子元素添加类，所以我只能用 CSS 来做。我尝试使用 :nth-child 但我没有成功。

Answer 1

用纯 CSS 做到这一点的唯一方法是如果你知道 child 的数量 <div class="item">有元素。例如，如果有 100 个元素，您可以使用 nth-child() 选择第二个 50 个元素带公式的选择器 an + b . b是您希望选择的第一个子元素的索引，a是循环大小，n是一个计数器。这里，我们选择a = 1和 b = 51

div.items div.item:nth-child(n+51) {
  background: yellow;
} 

如果您不知道子元素的数量，那么您必须使用 JavaScript。