Question

我有.field-item的列表。它们都是.even或.odd。（它们以.even开头，这不是CSS方式，但它不适合我。）

如果列表中有多个子项，我希望每个.even（第一个孩子为.even）都有背景色。

这些不会起作用：

.even，因为它包含第一项，如果只有1
.even:not(:last-child)，因为如果有3个
.field-item + .field-item.even，因为它不包含第一项，

这个确实有用，但它是双重的，这总是很遗憾：

.field-item.even:not(:last-child),   /* includes first, not last */
.field-item + .field-item.even       /* includes last, not first */

我确信使用单个选择器可以实现这一点，但我无法弄明白。也许有:nth-last-child()或其他东西......？一切都很公平。

PS。使用:nth-child(odd)也很好。给所有项目一个颜色和撤消一半是不好的。

Answer 1

您可以合并:not() / :only-child来实现此目标。

Example Here

.field-item.even:not(:only-child)

.field-item.even:not(:only-child) {
    color: red;
}

<div class="parent">
    <div class="field-item even">even</div>
    <div class="field-item odd">even</div>
    <div class="field-item even">even</div>
</div>

<hr> 
    
<div class="parent">
    <div class="field-item even">even (only child)</div>
</div>

如果超过1个孩子，请选择所有.even元素

1 个答案: