不同的背景只有后半部分的儿童元素

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执行此操作的唯一方法是，如果您知道子<div class="item">元素的数量。例如，如果有100个元素，则可以使用公式nth-child()的{​​{1}}选择器选择第二个50。 an + b是您要选择的第一个子元素的索引，b是周期大小，a是计数器。在这里，我们选择n和a = 1

b = 51

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

Answer 2

感谢大家！我可以找到解决方案：

.items .item:nth-child(10n+6) {background: red;}
.items .item:nth-child(10n+7) {background: red;}
.items .item:nth-child(10n+8) {background: red;}
.items .item:nth-child(10n+9) {background: red;}
.items .item:nth-child(10n+10) {background: red;}