css变量不能用于content属性切换logo路径，因其被浏览器规范禁止；应改用background-image + url(var(--logo))方式，并确保路径加引号；语义化需求仍需img或picture标签配合js或原生媒体查询。
content属性里直接用var()切换Logo路径会失效
浏览器规范明确禁止在content属性中使用var()，写content: var(--logo-light)会被静默忽略，元素可能塌陷或回退到空内容。这不是兼容性问题，是语法硬限制——content只接受字符串字面量或attr()，不参与CSS变量计算。
背景图方式：变量存纯路径，使用时套url()
正确做法是让CSS变量只存相对或绝对路径的纯字符串（带引号），并在background-image中手动包裹url()：
:root { --logo-light: "./img/logo-light.svg"; --logo-dark: "./img/logo-dark.svg"; }.logo { background-image: url(var(--logo-light)); }[data-theme="dark"] .logo { background-image: url(var(--logo-dark)); }
注意：路径必须加双引号或单引号，否则含空格、括号时解析失败；路径解析位置是CSS文件所在目录，不是HTML或JS执行位置。
必须用![]()
标签时，别让CSS变量管加载逻辑
CSS变量只负责样式计算，不触发网络请求或DOM变更。如果需要语义化、SEO友好或响应式缩放支持，<img>仍是更合理的选择：
- 用
picture+source[media]做原生系统级适配：<source media="(prefers-color-scheme: dark)" srcset="logo-dark.svg"></source> - 用JS读取
localStorage或matchMedia后动态设置img.src - CSS变量此时只用于同步过渡动画、filter或opacity等辅助样式，不参与资源加载
容易被忽略的关键点
很多人试图用CSS变量解决“资源加载”问题，但它只管样式值的计算和继承。路径拼接、HTTP请求、DOM结构变更这些，必须交给HTML原生机制或JavaScript来兜底——变量不是万能胶，它只在CSS渲染管线内起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
