Select 所有 .even 元素如果超过 1 children

Question

我有一个 .field-item 的列表。他们都是.even或.odd。（他们以 .even 开头，这不是 CSS 的方式，但这不取决于我。）

如果列表中超过 1 children，我希望每个 .even（第一个 child 是 .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>

Select 所有 .even 元素如果超过 1 children

Select all .even elements if more than 1 children

css

css-selectors