是否可以在 CSS 中将 :has 与 :first-of-type 或类似内容结合起来？

Question

我正在寻找一种方法来选择第一个且仅第一个父元素，该元素包含另一个具有给定类的元素。

举个例子：

<div class="wrapper">
<div class="item">
<div class="inner-element type-a">
</div>
</div>
<div class="item"> <!-- want to select this one -->
<div class="inner-element type-b">
</div>
</div>
<div class="item">
<div class="inner-element type-b"> <!-- but not this one -->
</div>
</div>
</div>

所以我可以使用

.wrapper .item:has(.inner-element.type-b)

选择 item div 中的

all

，其中包含具有

type-b

类的元素，但我只想定位第一个。

我尝试了

.wrapper .item:has(.inner-element.type-b):first-of-type

，但这似乎没有正确定位该元素。单独使用 CSS 是否可以做到这一点，还是我的选择器组合有问题？

Answer 1

一个可能的选择是应用您的第一个规则，然后将其“取消应用”到您不希望使用相邻同级选择器设置样式的后续元素

~

例如

.wrapper .item:has(.inner-element.type-b) {
  border: 1px solid red
}

.wrapper .item:has(.inner-element.type-b) ~ .item:has(.inner-element.type-b) {
  border: unset
}