css属性选择器无法响应css变量变化，因为--color等自定义属性仅存在于cssom中，不写入dom的style属性字符串，故[style*="red"]等选择器无法匹配；真正响应变量需用var()或@property。
CSS属性选择器本身不能响应CSS变量变化，它只匹配HTML元素上静态存在的style属性值（如style="color: red"），而--color这类自定义属性是CSS运行时变量，不暴露在DOM的style属性中，因此[style*="red"]或[style~="--color"]完全无效。
为什么[style]选择器对CSS变量不起作用
CSS变量（--xxx）存储在CSSOM中，不序列化进元素的style属性字符串。即使你写了:style="{ '--color': '#ff0000' }"，DOM里看到的仍是空的style属性或仅含其他内联样式，--color不会出现在el.getAttribute('style')结果里。
- 浏览器解析
style属性时只认标准CSS属性（color、background等），忽略--*前缀的声明 -
[style*="red"]只能匹配真实写在style="color: red"里的文本，不是变量计算后的渲染色 - 想靠属性选择器触发主题切换，本质是混淆了“样式声明位置”和“样式生效机制”
真正能响应CSS变量的只有var()和@property
要让样式随--color变化，必须在CSS规则中显式使用var(--color)，或用@property注册为可动画变量（兼容性有限）：
-
.btn { background-color: var(--color, #007bff); }—— 变量更新，背景立刻重绘 -
@property --color { syntax: '<color>'; inherits: false; initial-value: #007bff; }</color>—— 启用transition: --color 0.3s，但仅Chrome 126+ / Safari 17.4+支持 - 别试图用
[data-color="dark"]模拟——那属于class切换方案，和CSS变量无关
Element Plus / Ant Design等组件库的实际适配方式
第三方UI库内部样式通常不直接暴露--*变量供外部覆盖，需结合样式穿透与var()引用：
- 在
<style scoped></style>中用::v-deep .el-input__inner或:deep(.ant-btn)定位深层节点 - 在穿透选择器里写
color: var(--input-text-color);，而非[style*="--input-text-color"] - 通过父级
:style="{ '--input-text-color': textColor }"注入变量，变量值由JS控制 - 注意
scoped下:deep必须写在选择器开头，且不能嵌套在媒体查询内
最易被忽略的一点：CSS变量的继承链必须完整。如果父元素没声明--color，子元素var(--color)会回退到initial-value或unset，而不是从:root继承——尤其在Shadow DOM或v-for生成的独立作用域中，得手动在每个容器根节点上绑定:style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
