【CSS】CSS 对大小写敏感吗？

本文准备

• 使用 chrome 浏览器 版本 87.0.4280.88（正式版本） 进行测试

问

CSS 对大小写敏感（CSS 区分大小写）吗？

A、是

B、否

上面这题出自《超实用的 CSS 代码段》一书。

我个人觉得这本书并不是一本值得推荐的书，因其很多地方都不是那么严谨。同时这本书提供的 css 代码段在当下(都 2021 年啦)并不是那么实用。

数据来自京东

数据来自当当网，不再销售

虽然这本书并没有想象中那么好，且京东和当当长期不补货了（我指“自营”）。但看到这题时我还是答不上来（这可是我天天都在写的 css 代码啊！！！ 要是面试碰到这种狗血问题怎么办！！！）。在初学阶段应该是有学习过的，日常开发使用 css 真的太习以为常了，有时候反而会忽略很多小知识点。

答

有部分书上说 CSS 不区分大小写，但这种说法其实并不那么严谨（我通过实践确认的）。因为 ID选择器 和类选择器 对大小写敏感，而选择器是 CSS 的支柱。

比如下面的代码

<div class="box"></div><div id="case"></div>
<style>  /*有效*/  DIV {    width: 100px;    height: 100px;    BORDER: 1px solid #000; /* 注意，这行的BORDER是使用了大写 */  }
  /*无效*/  .Box {    background: red;  }    /*无效*/  #Case {    background: blue;  }</style>

这是上面代码的效果。

总结

• ID 和 类 选择器 区分 大小写

• 标签选择器、属性选择器 不区分 大小写

• 样式属性 不区分 大小写（比如：BORDER）

类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

—— W3C

在日常开发和学习中，建议使用小写字母。