使用querySelectorAll获取直接子元素报错，为何* > li可正常运行？

嘿，我来帮你搞清楚这个问题～

首先，报错的核心原因是CSS选择器的语法规则：子组合器>必须和一个前置选择器（或者代表当前元素的伪类）搭配使用，单独写> li是不符合规范的，浏览器根本无法识别这个无效的选择器，所以才会抛出那个错误。

你提到改成* > li就能运行，其实这是因为*是通配符选择器，它匹配所有元素，* > li的意思是“匹配所有作为任意元素直接子元素的li”。但这里有个坑：在lang元素上调用这个选择器时，它会选中lang所有后代里的li——包括那些嵌套在其他li里面的子li，这可能和你只想选lang直接子元素的初衷不符哦。

那正确的写法应该是什么呢？给你两个靠谱的方案：

方案1：使用:scope伪类 #

:scope是CSS中的伪类，它代表调用querySelectorAll的那个元素本身，刚好可以填补>前面的“前置选择器”位置，完美解决你的需求：

const lang = document.querySelector('.lang');
const items = lang.querySelectorAll(':scope > li');

方案2：直接遍历子元素过滤 #

如果担心老浏览器对:scope的支持（不过现在主流浏览器都支持了），也可以直接获取元素的子节点然后过滤：

const lang = document.querySelector('.lang');
const items = Array.from(lang.children).filter(child => child.tagName === 'LI');

这样就能精准拿到lang的直接子li元素啦～

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