IE8及以下对属性选择器支持有限：IE8支持[attr]和[attr="val"]，但忽略[attr~="val"]和[attr|="en"]；IE7仅在标准模式下部分支持，且对引号敏感；伪类与属性选择器组合（如a[href^="https"]:hover）会被截断。
IE8及以下不支持属性选择器中的波浪号~和竖线|
IE8能识别 [attr="value"] 和 [attr]，但遇到 [attr~="val"]（空格分隔匹配）或 [attr|="en"]（连字符前缀匹配）会直接忽略整条规则——不是报错，是静默失效。这意味着样式丢失且控制台无提示，排查时容易误判为HTML结构问题。
- 真实场景多见于第三方CSS框架（如旧版Bootstrap）中对
lang属性的处理，或自定义组件的data-属性状态控制 - 若必须兼容IE8，改用class模拟：比如把
[data-status="loading"]换成.status-loading，JS侧同步增删class - 构建流程中可用PostCSS插件
postcss-attribute-selectors自动降级，但需注意它不处理~=和|=的语义等价转换，仅删除或警告
IE7连基础属性选择器都不可靠
IE7只支持部分属性选择器，且要求文档声明为<!DOCTYPE html>（即触发标准模式），否则退化为IE5.5怪异模式，连[type="submit"]都不认。更隐蔽的是：它对属性值中的引号极其敏感——[class='btn']有效，但[class="btn"]在某些补丁版本下会失效。
- 验证方式很简单：打开IE7开发者工具（F12），切换到“浏览器模式：IE7”，然后在控制台执行
document.querySelectorAll('[type="button"]')，返回空数组就说明不支持 - 避免在关键布局层使用属性选择器，比如
main[role="main"]这种结构定位；换成<main class="main">再写.main - 如果项目仍需支持IE7，建议全局禁用Sass/Less中的属性选择器输出，或用
@if $legacy-support-for-ie7条件编译隔离
伪类+属性选择器组合在IE8中被截断
像a[href^="https"]:hover这种组合，在IE8里:hover部分会被丢弃，最终只生效a[href^="https"]——也就是链接永远带悬停样式，不管鼠标是否移入。这不是bug，是IE8选择器引擎的解析限制：它不支持伪类与属性选择器混用。
- 常见于导航菜单的外部链接标识（如加图标）、表单必填字段高亮（
input[required]:invalid） - 拆解为两条规则：先写
a[href^="https"]设基础样式，再单独写a:hover覆盖悬停态，用class或JS控制状态叠加 - 注意CSS优先级变化：拆开后
a:hover权重低于a[href^="https"]:hover，可能需要加!important或调整顺序
现代项目中如何安全使用属性选择器
除非明确要支持IE8及以下，否则属性选择器本身没问题。真正危险的是团队协作中「以为写了就能用」——比如Vue组件里用[data-v-xxx]做scoped样式，结果被Webpack的CSS提取插件剥离后，在IE8环境里变成裸露的属性选择器。
立即学习“前端免费学习笔记（深入）”；
- 检查构建产物：用
grep -r "\[" dist/扫出所有CSS文件里的[，确认是否残留未降级的选择器 - CI阶段加入浏览器兼容性检查，例如用
stylelint配合stylelint-config-standard和stylelint-no-unsupported-browser-features插件 - 最省事的底线：所有影响布局、可访问性、核心交互的CSS，避开属性选择器；仅用于修饰性、渐进增强类样式（如
img[alt]加边框）
属性选择器的坑不在语法本身，而在它太像class选择器了——写的时候顺手，上线后才发现老IE根本没看见那行CSS。
