CSS类名、属性值、语言标签及文件路径均区分大小写，易致样式静默失效；应统一小写命名、校验实际渲染值、避免依赖i标志、遵循BCP 47规范、检查Network面板404。
class名大小写不一致导致样式丢失
CSS类名区分大小写，而HTML的class属性在解析时不区分——这会造成“看着一样，实际不匹配”的错觉。比如HTML里写<div class="Header">，但CSS中用了.header { color: red; }，这条规则就完全不会生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一使用小写命名class（如
header、btn-primary），并在HTML和CSS中严格保持一致 - 检查开发者工具Elements面板里元素实际渲染出的class值，复制它再粘贴到CSS中，避免手输错误
- Vue/React中通过
className或class绑定动态字符串时，确认变量值不含意外大写或空格，例如`${prefix}-active`中prefix不能是"Btn"
属性选择器值大小写敏感需显式处理
像[type="submit"]这类属性选择器，默认区分大小写。HTML中<input type="SUBMIT">不会被[type="submit"]匹配到——浏览器不会自动转为小写比对。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先让HTML属性值与CSS中书写完全一致（都用小写）
- 需要忽略大小写时，加
i标志：[type="submit" i]，现代浏览器均支持，但IE不兼容 - 避免依赖
i标志做核心逻辑；若需兼容IE，改用JS添加统一class，再用class选择器控制样式
:lang()选择器大小写与BCP 47标准强相关
:lang(zh-CN)只匹配lang="zh-CN"，不匹配lang="zh-cn"或lang="ZH-CN"。这不是bug，而是遵循BCP 47语言标签规范——大小写敏感且子标签必须精确。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接在目标元素上写
lang属性，例如<p lang="zh-Hans">，不要依赖祖先继承 - 用开发者工具Computed面板确认该元素的
language字段值是否为你期望的格式 - 避免非标准写法如
lang="Chinese"或lang="cn"，它们不会触发:lang()匹配
文件路径和@import中大小写影响加载结果
在Linux/macOS服务器或启用区分大小写的文件系统上，@import "style.css"与实际文件Style.css不匹配会导致整个导入规则静默失效——浏览器不报错，但后续所有依赖该文件的样式都不会应用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查Network面板中CSS请求是否返回404，特别注意文件名大小写
- 本地开发时启用case-sensitive filesystem（如macOS默认关闭，可通过
diskutil重格式化启用）来提前暴露问题 - CI/CD流程中加入脚本校验
link和@import路径与实际文件名是否逐字符一致
