[attr^=""]不生效最常见原因是属性值开头有空格或不可见字符，且布尔属性如disabled不适用该语法；它严格匹配开头，而[attr*=""]为包含匹配；需注意大小写、浏览器兼容性及动态设置时的渲染问题。
为什么 [attr^=""] 有时不生效
最常见原因是属性值开头有空格或不可见字符（比如换行、 ），而 [attr^="value"] 是严格从字符串首字符开始比对的。例如 data-id=" 123"（前面带空格）不会被 [data-id^="123"] 匹配到。另外，HTML 中布尔属性如 disabled 没有等号和值，写成 [disabled^=""] 也无效——它根本不是带值的属性。
[attr^=""] 和 [attr*=""] 的使用边界
前者只匹配“真正以某串开头”的情况，后者是包含关系，更宽松但不够精确。比如要高亮所有以 https://api. 开头的 src，必须用 [src^="https://api."]；若用 [src*="api."]，可能误中 https://example.com/path?api=1 这类 URL。
-
[href^="/static/"]→ 只选站内静态资源链接 -
[class*="btn-"]→ 选含btn-的任意位置，比如class="primary-btn-lg" -
[data-status^="error"]→ 要求状态值严格以error打头，排除warning-error
实际项目中容易漏掉的兼容性细节
IE7+ 支持 [attr^=""]，但仅限于 CSS2.1 层级的属性选择器；如果属性名含连字符（如 data-user-id），某些老版本 WebKit（iOS 6 Safari）解析不稳定。更隐蔽的问题是：当属性值由 JavaScript 动态写入时，若用 el.setAttribute('data-role', 'admin') 没问题，但用 el.dataset.role = 'admin' 在部分旧浏览器中可能不触发样式重计算。
- 服务端渲染 HTML 时，确保属性值无前后空白 —— 可用
trim()预处理 - 避免在属性值里混用单双引号，如
data-config='{"a":1}'和data-config='{"a": 1}'会被视为不同字符串 - Vue/React 中通过
v-bind:或data-属性透传时，确认框架未自动加前缀或转义
调试时快速验证是否命中选择器
打开 DevTools，在 Elements 面板里右键目标元素 → “Break on” → “Attribute modifications”，然后手动改属性值看样式是否实时切换。更直接的方法是临时加一条测试规则：
code{[data-type^="prod"] { outline: 2px solid red !important; }}
如果没反应，说明要么属性名拼错，要么值开头不一致，或者该元素根本没渲染出这个属性。
注意：CSS 属性选择器区分大小写，[lang^="en"] 不会匹配 lang="EN-US"，需要明确写成 [lang^="EN"] 或统一服务端输出格式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
