css变量无法在content属性中直接使用，因规范禁止var()函数出现在content中，浏览器会静默忽略该声明；可行方案是改用background-image配合css变量控制logo背景图。
直接用 content 配合 CSS 变量切换 Logo 不可行——content 只接受字符串字面量或 attr()，不支持 var()。
为什么 content: var(--logo-url) 会失效
CSS 规范明确禁止在 content 属性中使用 var()。浏览器遇到这种写法会直接忽略整条声明，退回到默认（空）或继承值。这不是兼容性问题，而是语法层面的硬性限制。
- 错误示例：
content: var(--logo-light);→ 浏览器静默丢弃，元素可能塌陷或显示 fallback 文本 -
attr(data-logo)只能读取 HTML 属性原始字符串，无法做变量替换或路径拼接 - 即使配合
@supports (content: var(--x))查询，结果永远为false
可行替代方案：用 background-image + CSS 变量
把 Logo 当作背景图来控制，是目前最稳定、可维护性最强的方式。变量控制 URL，同时保留响应式缩放和透明度等样式能力。
- 定义变量时确保是合法 URL 字符串（含引号）：
--logo-light: url("/img/logo-light.svg"); - 在元素上用
background-image: var(--logo-light)，而非content - 配合
background-size、background-repeat等统一控制呈现效果 - 需要图标换色？改用
mask-image+background-color组合，变量只管颜色
如果必须用 <img> 标签，就别绕开 HTML 层
想让 Logo 切换真正“自适应”，又要求语义化和 SEO 友好，<img> 是更合理的选择。CSS 变量只负责驱动属性变更，不越界操作 DOM。
- 用 JavaScript 动态设置
img.src，读取localStorage或prefers-color-scheme后决定加载哪个资源 - 或用
picture+source[media]做原生系统级适配：<source media="(prefers-color-scheme: dark)" srcset="logo-dark.svg"></source> - CSS 变量此时只用于同步按钮状态、过渡动画或辅助样式（如
filter: var(--logo-filter)），不参与资源加载
真正容易被忽略的是：很多人试图用 CSS 变量解决“资源加载”问题，但它只管“样式计算”。路径、网络请求、DOM 结构这些，得交给 JS 或 HTML 原生机制来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
