能否在:where()或:is()伪类中使用复杂选择器？实操疑问

你的问题出在CSS选择器组合器的作用域逻辑上：

当你写main > :where(div, section, ul > li)时，:where()里的每个选择器都是独立单元，会和前面的main >直接组合。这会被解析成三个完全不同的选择器：

• main > div（正常匹配main的直接子div）
• main > section（正常匹配main的直接子section）
• main > (ul > li)（无效，这个选择器要求li是main的直接子元素，同时li的父元素是ul——这显然不可能，li的父元素是ul的话，就不可能是main的直接子元素）

而你原本的main > ul > li是匹配「main的直接子ul的子li」，和上面第三个解析结果完全不是一回事，自然无法选中目标元素。

正确的简化写法 #

如果想消除main >的冗余，你需要根据选择器的层级逻辑调整写法：

// 写法1：拆分分支，消除部分冗余
document.querySelectorAll('main > :where(div, section), main > ul > li');

// 写法2：用:where()包裹完整选择器，彻底消除冗余
document.querySelectorAll(':where(main > div, main > section, main > ul > li)');

补充说明 #

:where()和:is()的参数是完整的选择器列表，但外部的组合器（比如这里的>）只会作用到它们内部每个选择器的最左侧节点，不会穿透到内部的组合器逻辑。所以不能把跨层级的选择器（比如ul > li）直接放到main >后面的:where()里，这会完全改变选择器的匹配范围。

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