如何用CSS仅选择包含指定类子元素的首个父元素？

你的核心需求是选中第一个包含.inner-element.type-b子元素的.item容器，之前的选择器失效是因为:first-of-type的工作逻辑不符合预期：

.wrapper .item:has(.inner-element.type-b):first-of-type 会先找所有符合:has(.type-b)的.item，再试图从中筛选出父容器里的第一个.item——但第一个.item本身并不包含.type-b，所以这个选择器无法匹配到目标元素。

正确的CSS选择器方案 #

可以通过排除后续同类匹配元素的方式实现需求，完整选择器如下：

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

选择器逻辑拆解 #

1. 基础筛选：.item:has(.inner-element.type-b) 先找出所有包含.type-b子元素的.item容器；
2. 排除后续元素：:not(:has(~ .item:has(.inner-element.type-b))) 会排除掉「后面还存在其他符合条件的.item」的元素，最终剩下的就是第一个匹配的.item。

在你的示例HTML结构中，这个选择器会精准选中第二个.item，而不会选中第三个.item。

兼容性说明 #

:has()选择器目前已被Chrome、Edge、Safari稳定支持；Firefox需要在about:config中开启layout.css.has-selector.enabled配置才能使用。

内容的提问来源于stack exchange，提问作者Simon Logan