如果 CSS 选择器不区分大小写，那么为什么不覆盖样式？ [复制]答案

【问题标题】：If CSS selectors are case-insensitive then why styles not overridden? [duplicate]如果 CSS 选择器不区分大小写，那么为什么不覆盖样式？ [复制]
【发布时间】：2019-05-21 23:22:22
【问题描述】：

据我所知，从question 来看，css 选择器不区分大小写，但 HTML 属性（类名）区分大小写，因此恕我直言，.example 应该被 .Examplecss 选择器覆盖，但这不会发生。 <div class="example">color 仍然是红色而不是蓝色，因为 css 选择器不区分大小写。

.example {
  color: red;
}

.Example {
  color: blue;
}

<div class="example">
  example
</div>

【问题讨论】：

上面写着But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5.1 所以..
@golddragon007 他已经在问题中包含了该链接..
从链接的问题中，接受的答案是CSS selectors are generally case-insensitive... But HTML class names are case-sensitive。正如您在我的代码中看到的那样，html 类名称 class="example" 是小写的，但 css 有 2 个类 .example 和 .Example 应该选择 div.example" 因此它的颜色应该是蓝色，因为 .Example 覆盖了由.example
正如我在回答中已经说过的，@treyBake 引号，HTML 类名区分大小写是您的第二条规则不匹配的原因 - 因为“示例”和“示例”不一样 -因此没有什么可以覆盖的。
class 和 id 区分大小写。 tags 不是。所以 css 中的 p 或 P 将选择 <p> html 元素。通过说HTML class names are case-sensitive 暗示当您尝试在 CSS 中选择它们时就是这种情况。并不是说你不能使用ExAmPle 作为类名（虽然不推荐）

标签： html css css-selectors

【解决方案1】：

基本上

.example {}

和

.Example {}

现在是两个不同的东西，所以最好避免对类使用相同的名称，并且不要将两个类命名为相同是一种很好的编码习惯。

【讨论】：

【解决方案2】：

你完全正确！ CSS 实际上主要是不区分大小写的。

但是 HTML 4.01 将类和 id 名称定义为区分大小写，这在 HTML5 中没有改变。

所有 CSS 语法在 ASCII 范围内都不区分大小写（即 [a-z] 和 [A-Z] 是等效的），但不受 CSS 控制的部分除外。例如，HTML 属性“id”和“class”、字体名称和 URI 的值的大小写敏感性超出了本规范的范围。

Source

【讨论】：