关于:has()中嵌套相对选择器的疑问及父元素选择咨询

1. 能否嵌套相对选择器？ #

可以嵌套，但你写的选择器有两处语法错误导致失效：

• 目标元素是id="outer-div"，选择器开头应该用#outer-div（#对应ID选择器，.是类选择器）；
• + inner-div里的inner-div是类选择器，必须加.写成+ .inner-div。

修正后可正常生效的选择器：

#outer-div:has(> .inner-div:has(+ .inner-div)) { ... }

它会选中包含「一个直接子元素.inner-div，且该子元素后紧跟着另一个.inner-div」的#outer-div元素。

2. 最优选择包含两个特定子元素的父元素？ #

分两种场景给出最优方案：

场景1：父元素至少包含两个直接子元素是.inner-div #

用:has()结合相邻兄弟选择器是最简洁的写法，直接检查父元素下是否存在连续的两个.inner-div直接子元素：

#outer-div:has(> .inner-div + .inner-div) { ... }

场景2：父元素恰好只有两个直接子元素，且都是.inner-div #

需要同时验证前两个子元素是.inner-div，且不存在第三个子元素：

#outer-div:has(> .inner-div:nth-child(1)):has(> .inner-div:nth-child(2)):not(:has(> :nth-child(3))) { ... }

注：:has()选择器目前已被Chrome、Edge、Safari等主流浏览器支持，兼容性无问题。

内容的提问来源于stack exchange，提问作者Aaron Parisi