属性选择器默认逐字符比对，非语义匹配；[attr="value"]严格全等比较，不归一化大小写、空格或Unicode；[href$=".pdf"]不匹配.PDF等变体，需用[href$=".pdf" i]或JS处理。
属性选择器默认逐字符比对，不是“语义匹配”
CSS 属性选择器 [attr="value"] 的匹配逻辑是原始字符串全等比较，不进行任何归一化处理。它不会把 "PDF" 转成小写再比，也不会忽略前后空格或 Unicode 变体。这意味着：[href$=".pdf"] 只匹配以小写 .pdf 结尾的 href 值，对 .PDF、.Pdf、.pDf 全部失效。
常见错误现象：
-
a[href$=".PDF"]在 HTML 中写href="report.pdf"→ 不匹配 -
[data-role="Header"]对应data-role="header"→ 不匹配 - 从 CMS 或用户输入生成的链接含大写扩展名（如
doc.PDF?ts=1）→[href$=".pdf"]静默跳过
HTML 宽容 ≠ CSS 匹配宽容
浏览器解析 HTML 时确实对 class/id/attribute 名大小写不敏感（比如 class="Nav" 和 class="nav" 都能被识别为字符串），但这只是 HTML 解析层的行为；CSS 引擎在匹配阶段完全独立，只认你写的那个确切值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用小写书写所有属性值：HTML 里写
data-status="active"，CSS 里写[data-status="active"] - 需要兼容大小写变体时，必须显式加
i标志：[href$=".pdf" i]，且注意中间必须有空格，i必须小写 - IE 不支持
i，若需兼容，改用 JS 动态判断new URL(el.href).pathname.toLowerCase().endsWith('.pdf')并添加 data 属性
data-* 属性命名不规范会放大大小写问题
自定义 data- 属性在 HTML 中会被浏览器自动转为全小写。例如：data-userId="123" 实际存为 data-userid="123"，但 CSS 里若写 [data-userId="123"] 就永远不生效——因为属性名本身已变更，且 CSS 选择器区分大小写。
使用场景：
- HTML 中必须用小写字母 + 短横线：
data-api-version="v2" - CSS 选择器严格对应：
[data-api-version="v2"]，不能写成[data-apiVersion="v2"] - 驼峰命名（如
data-userId）在 React/Vue 中可能被框架过滤或转义，直接丢失
大小写干扰常藏在动态内容里，肉眼难察觉
最易被忽略的是 JS 动态设置或服务端注入的属性值：比如 el.setAttribute('href', filename.toUpperCase())、CMS 输出的 href="DOC.PDF"、甚至复制粘贴进 HTML 的全角空格或零宽字符，都会让 [href$=".pdf"] 失效。
排查方法：
- 在 DevTools Elements 面板右键目标元素 → “Edit as HTML”，看清真实渲染出的属性值（包括前后空格、大小写、不可见字符）
- 在 Console 运行
$0.getAttribute('href')直接读取 DOM 中的原始字符串 - 避免依赖肉眼比对，用
String.prototype.endsWith()模拟 CSS 行为验证
实际项目里，大小写问题往往不是“写了没效果”，而是“有时有效、有时无效”——根源几乎总是动态内容混入了未预期的大小写或空格。不检查真实 DOM 值，光看 HTML 源码或 JS 变量名，十有八九会漏掉。
