如何编写正确CSS选择器获取container下class为paper的首个子元素？

我来帮你修正这个选择器问题~

你原来的代码document.querySelectorAll(".container:first-child.paper")之所以出错，是因为这个选择器的逻辑完全偏离了你的需求：它试图寻找同时拥有container和paper类，并且是其父元素第一个子元素的元素，但你的结构里container是ul容器，paper是容器下的li子元素，层级和匹配逻辑都不对。

针对你的需求的正确选择器 #

根据你描述的“从class为container的元素中，获取所有class为paper的首个子元素”（即每个.container的第一个子元素，且该子元素的class是paper），正确的选择器应该是：

let selected = document.querySelectorAll(".container > li:first-child.paper");

选择器逻辑拆解 #

• .container：定位所有class为container的ul容器
• >：限定只匹配容器的直接子元素（避免选中嵌套更深的元素）
• li:first-child：筛选出每个容器里的第一个子li元素
• .paper：最终只保留那些拥有paper类的li

对应你的HTML结构，这个选择器会选中：

• 第三个.container里的第一个li（class为paper）
• 第五个.container里的第一个li（class为paper）

额外情况：如果需求是每个容器里的第一个paper元素 #

如果你实际需求是“每个.container里的第一个paper类元素，不管它是不是容器的第一个子元素”，可以改用这个选择器：

let selected = document.querySelectorAll(".container .paper:first-of-type");

内容的提问来源于stack exchange，提问作者Romualdo Arrechea Hernández