IE6–IE8完全不支持属性选择器，[type="submit"]等规则被解析器静默丢弃，连声明块内其他样式也不应用；需手动降级为class结构，如input.checkbox并同步添加HTML class。
属性选择器在 IE6–IE8、Safari ≤15.4、Chrome ≤38 中完全不支持，整条规则会被静默丢弃——不是样式没生效，而是浏览器压根没解析它。
为什么 [type="submit"] 在 IE8 里根本不起作用？
IE6–IE8 不识别任何属性选择器语法，[type="submit"]、[href^="https"]、[data-*] 全部被跳过。这不是“匹配失败”，而是 CSS 解析器直接拒绝该规则，连声明块里的其他样式（比如 color 或 display）都不会尝试应用。
常见错误是以为加个兜底类就能覆盖，比如：
.btn { color: #666; }
.btn[type="submit"] { color: #007bff; }
结果 IE8 只渲染第一行，现代浏览器却因 specificity 相同，可能让第二条规则被意外覆盖。
立即学习“前端免费学习笔记（深入）”；
- 不要把属性选择器和类选择器混写在同一规则链中（如
.form-control[type="text"]），旧浏览器整行丢弃 - IE8 不支持
[class~="active"]这类空格分隔匹配，也认不出[data-id]这种存在性判断 - autoprefixer 对属性选择器完全无能为力——它只处理属性值前缀，不改选择器结构
如何安全降级 [type="checkbox"] 这类写法？
不能靠工具自动转译，必须手动重构语义等效的 class 结构。
- 把
input[type="checkbox"]换成input.checkbox，并在 HTML 中显式添加class="checkbox" - 把
a[href^="mailto:"]拆成a.mailto-link，用 JS 或构建时注入 class（避免运行时 DOM 遍历影响首屏） - 对
[data-status="pending"]这类状态驱动样式，优先用 class 切换（.status-pending），而非依赖 data 属性
注意：若已有大量 data 属性且无法改 HTML，可用轻量 JS 在 DOM ready 后批量补 class，但需确保不破坏 SSR 或 hydration 流程。
哪些属性选择器写法更容易踩坑？
看似合法的 Level 4 语法，在旧浏览器里照样失效，且 DevTools 很难一眼发现。
-
[type="text" i]（带i忽略大小写）：Chrome 63+、Firefox 61+ 支持，IE 和 Safari ≤15.4 完全不认 -
[href*="example" i]：多条件组合 + 修饰符，兼容性断层更明显 -
button:not([disabled])：:not() 本身在 IE 全系不支持，叠加属性选择器等于双重失效
验证时别只看元素是否变色——打开 Safari/IE 的开发者工具，检查对应规则是否被划掉（invalid）或干脆不显示，这才是真实支持状态。
真正麻烦的不是写法本身，而是团队协作中没人检查最终生成的 CSS 是否还带着 [data-* ——尤其当 SCSS 编译后输出未被 lint 或 postcss-preset-env 显式处理时，问题会潜伏到上线才暴露。
