element.className与element[class~="className"]的区别是什么？

大部分场景下，这两种选择器的行为完全一致：都会匹配class属性中包含独立className类的元素——不管该类是单独存在，还是和其他类用空格分隔。

但确实存在二者选中不同元素的情况，最典型的场景是类名包含特殊字符（如点号.）：

示例：类名含点号的情况 #

<div class="foo.bar"></div>
<div class="foo bar"></div>

• div.foo.bar：会匹配第二个div（同时拥有foo和bar两个类的元素），因为类选择器中的.是类名的分隔符，而非类名的一部分；
• div[class~="foo.bar"]：会匹配第一个div（class属性中包含独立的foo.bar类的元素），它会把整个字符串当作一个完整的类名去匹配。

如果想用类选择器匹配第一个div，必须对.进行转义：div.foo\.bar。

其他极端场景 #

当class属性值使用了非标准的空白分隔符（如全角空格），类选择器会将所有Unicode空白字符视为类分隔符，而[class~="className"]严格按照CSS定义的空白字符（半角空格、制表符等）进行匹配，但这种情况在实际开发中几乎不会遇到。

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