为什么CSS选择器中[class='属性值']的AND逻辑匹配写法不生效？

核心差异来自两种类匹配规则的本质不同：

• 第一种写法里的.nav-cart-count是CSS原生类选择器，匹配规则为：只要元素class属性的空格分隔类名列表中包含nav-cart-count即可命中，无论元素是否同时携带其他类、class属性前后是否有多余空格。
• 第二种写法里的[class='nav-cart-count']是完全严格相等的属性匹配器，匹配规则为：元素class属性的完整字符串必须和引号内的内容100%一致，多一个空格、多一个其他类都会匹配失败。

举个实际场景示例：如果你的span标签实际渲染结果是<span id="nav-cart-count" class="nav-cart-count cart-active">，额外携带了cart-active动态类，那么.nav-cart-count可以正常命中该元素，[class='nav-cart-count']就会匹配失效。

你之前用到的input[key='something'][type='sometype']可以正常运行，是因为type、自定义key这类属性的值都是单一字符串，不存在空格分隔多个值的情况，完全相等匹配自然可以命中，和class属性的多值场景有本质区别。

如果确实需要用属性选择器实现和类选择器一致的效果，可以使用空格分隔列表匹配符~=，写法为[class~='nav-cart-count']，该匹配规则和原生类选择器完全等价。

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