如何用CSS :has()结合:first-of-type选择首个含指定子元素的父元素？

你尝试的.parent-item-selector:has(.child-item-selector):first-of-type之所以无效，是因为:first-of-type的作用逻辑是选中同类型元素中的第一个，它不会先筛选出符合:has()条件的父元素再从中选第一个，只会匹配所有.parent-item-selector里的第一个元素——哪怕这个元素并不包含.child-item-selector子元素。

可以利用CSS兄弟选择器~和否定伪类:not()实现需求，核心逻辑是：先筛选出所有包含目标子元素的父元素，再排除掉前面已有其他符合条件父元素的项，剩下的就是第一个符合要求的元素。

实现代码如下：

.parent-item-selector:has(.child-item-selector):not(:has(~ .parent-item-selector:has(.child-item-selector))) {
    background-color:#0ebac5;
    padding: 10px;
    border-radius: 10px;
}

• .parent-item-selector:has(.child-item-selector)：先筛选出所有包含.child-item-selector子元素的父元素
• :not(:has(~ .parent-item-selector:has(.child-item-selector)))：排除掉后面跟着其他符合条件父元素的项，最终仅保留前面没有同类符合条件元素的第一个目标父元素

另外你提供的无效代码里多了一个多余的右括号)，不过这不是核心问题——即使去掉这个括号，原选择器的逻辑依然无法满足你的需求。

内容的提问来源于stack exchange，提问作者Jonathan Stegall