element.className 与 element[class~="className"] - 有什么区别？

Question

我一直在尝试了解 CSS 中以下 2 个类选择器之间到底有什么区别

element.className

element[class~="className"]

我的理解是，在这两种情况下，任一选择器都会查找包含等于选择器的离散类值的元素，在本例中为 className 值。

例如：

<element class="className" />
<element class="class Name" />
<element class="className className2" />
<element class="class-Name" />

Answer 1

区分大小写

如何评估

element.className

和

element[class~="className"]

之间的一个区别是区分大小写。

匹配怪异模式文档时，类名必须匹配 ASCII 大小写；否则，类选择器区分大小写，仅匹配与其相同的类名。 - https://drafts.csswg.org/selectors/#class-html

因此，如果 HTML 文件顶部有

element.className

，则

<!DOCTYPE html>

区分大小写；如果没有，则不区分大小写。

默认情况下，选择器中属性名称和值的区分大小写取决于文档语言 - https://drafts.csswg.org/selectors/#attribute-case

因此

element[class~="className"]

取决于文档所使用的语言。但您也可以明确将其设置为不区分大小写

element[class~="className" i]

和区分大小写

element[class~="className" s]

，请注意后者是实验性的。

请注意，某些工具/浏览器可能会对您进行大小写标准化，从而使所有这些变得多余。不要使用

className

和

classname

，并区别对待它们！

请注意，属性选择器是在 CSS 2.1 中引入的，而 .class 选择器似乎已经存在了更长时间。几乎每个浏览器都支持两者，但我敢打赌更多浏览器支持标准

.className

选择器，而不是复杂的

~=

属性语法（尽管有 caniuse.com 数据）