DOM选择器疑问：'.selector'与'[class="selector"]'的差异及查找失败原因

这俩选择器看着相似，但匹配规则其实差得挺多，我给你拆解清楚：

• .selector（类选择器）：只要元素的class属性里包含这个类名就行，不管它还附带了其他什么类。比如元素是class="a b c"，.a、.b、.c都能选中它。
• [class="selector"]（属性精确匹配选择器）：要求元素的class属性值完全等于引号里的内容，多一个字符、少一个空格甚至类名顺序变了都不行。比如元素class是"a b"，[class="a"]匹配不到，连[class="b a"]也匹配不了"a b"的元素。

看你贴的测试结果就懂了：
你找到的元素class属性实际是"cropped-profile-image__picture cropped-profile-image__picture--type-cover"和"cropped-profile-image__picture cropped-profile-image__picture--type-profile"，都是带两个类的。用[class="cropped-profile-image__picture"]时，它要找的是class属性完全就是这个字符串的元素，自然找不到；而.cropped-profile-image__picture只看元素有没有这个类，所以能命中那两个元素。

要是你想用属性选择器实现类选择器的效果，可以用[class~="cropped-profile-image__picture"]，这个~=符号表示匹配属性值里包含指定空格分隔单词的元素，和类选择器逻辑一致。

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