如何使用querySelectorAll同时筛选指定类名与src属性的元素

你之前的问题出在选择器的写法上——你用了空格分隔类选择器和属性选择器，这会让浏览器去寻找class为one的元素的后代元素里符合属性条件的元素，但实际上你要找的是本身同时拥有one类和指定src属性的<img>元素，所以两个选择器之间不能有空格！

正确的选择器写法 #

直接把类选择器和属性选择器连在一起，不需要任何分隔符（除了属性选择器本身的括号）：

const circleANDClassTwo = document.querySelectorAll('.one[src="https://cdn-icons-png.flaticon.com/512/734/734544.png"]');
console.log(circleANDClassTwo); // 会输出id为5和6的两个img元素

为什么之前的写法不对？ #

你原来的选择器.one [src="..."]里的空格是后代组合器，它的作用是：

• 先找到所有class为one的元素
• 再在这些元素的子元素/后代元素里找符合src属性条件的元素

但你的目标元素本身就是class为one的<img>，并不是后代，所以空格会导致找不到任何匹配的元素。

验证效果 #

结合你的HTML结构，这个正确的选择器会精准匹配：

• id=5：class="one"且src符合指定值
• id=6：class="one"且src符合指定值

完全符合你的筛选需求。

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