如何正确使用querySelector同时匹配data属性与指定class类名？

你当前的写法并非多条件同时匹配的正确写法。

相关代码 #

目标元素结构：

<div class="slds-col slds-size_1-of-1 slds-hide" data-controllinganswer="a1ZC2000000O2n3MAC" data-questionid="a1fC20000000VgXIAU" data-id="a1fC20000000VmzIAE" data-selectedanswer="a1ZC2000000O2zxMAC">

你当前使用的查询语句：

this.template.querySelector('[data-id="' + e.dataset.id + '"], .slds-show')

问题原因 #

CSS选择器语法中，逗号,是分组选择符，对应逻辑为「或」：只要元素匹配逗号分隔的任意一个选择规则，就会被命中。
你写的选择器实际匹配范围是：

• 所有data-id属性等于传入e.dataset.id值的元素
• 所有携带slds-show类名的元素
  元素只要满足任意一个条件就会被返回，所以哪怕目标元素只有slds-hide类、没有slds-show，只要它的data-id匹配传入值，就会被查询方法返回，这就是你遇到不符合预期返回的核心原因。

正确写法 #

如果你的需求是查询同时满足两个条件（data-id匹配、且携带slds-show类名）的元素，直接将两个选择器无间隔连写即可，这种写法对应CSS选择器的「与」逻辑：

this.template.querySelector('[data-id="' + e.dataset.id + '"].slds-show')

选择器逻辑速查 #

• 规则A, 规则B：逻辑或，命中满足A或B任意一项的元素
• 规则A规则B：逻辑与，命中同时满足A、B所有规则的元素

内容的提问来源于stack exchange，提问作者Nagendra Kumar Singh