gpt4 book ai didi

css - 如果超过 1 个 child ,则选择所有 .even 元素

转载 作者:行者123 更新时间:2023-11-28 09:47:11 25 4
gpt4 key购买 nike

我有一个 .field-item 列表。它们都是 .even.odd。 (它们以 .even 开头,这不是 CSS 方式,但这不取决于我。)

如果列表中有超过 1 个 child ,我希望每个 .even(第一个 child 是 .even)都有背景色。

这些都行不通:

  • .even,因为如果只有 1 个,它会包含第一个元素
  • .even:not(:last-child),因为如果有 3 个就排除第 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() 之类的东西……?一切都是公平的。

附言。使用 :nth-child(odd) 也可以。给所有元素一个颜色并撤消一半是不对的。

最佳答案

你可以结合: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>

关于css - 如果超过 1 个 child ,则选择所有 .even 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28908169/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com