相对颜色语法不直接实现高亮，而是基于变量动态生成新颜色；需配合::selection、:focus-visible等伪类或状态类使用，且受浏览器兼容性限制（如safari不支持oklch）。
相对颜色语法本身不直接实现“高亮效果”，它只是帮你基于已有颜色变量动态生成新颜色——比如把当前主题色变亮、变暗、反色或混合出强调色。真正在 UI 中起高亮作用的，是把这些算出来的颜色用在 ::selection、::highlight()、激活态类（如 .active）或焦点样式（:focus-visible）里。
相对颜色语法能做什么：从 --primary 快速派生高亮色
你不能直接写 color: from var(--primary) lch; ——语法不完整。必须带计算表达式，且只支持 l、c、h 三个通道（oklch/oklab 同理）。常见用途是生成对比更强的文本色、更浅的背景色，或用于悬停/激活态的微调。
-
变亮用于背景高亮：
background-color: oklch(from var(--primary) calc(l * 1.2) c h);——但注意l超过 1 会溢出，实际应加min()保护，如min(1, calc(l * 1.2)) -
反色用于文字高亮：
color: oklch(from var(--primary) calc(1 - l) c calc(h + 180));——适用于深色背景上弹出浅色文字提示 -
降低饱和度用于禁用态：
border-color: oklch(from var(--primary) l calc(c * 0.3) h);——比硬写#ccc更语义化、可维护
::highlight() 高亮必须配合 JS，相对颜色只是配色工具
::highlight(mysearch) 这个伪元素本身不识别相对颜色语法；它只接受最终计算好的颜色值。但你可以用相对颜色提前定义好一套高亮色组，再注入到 JS 注册逻辑中：
- 先定义：
:root { --highlight-bg: oklch(from var(--accent) l calc(c * 0.7) h); } - 再在 CSS 中使用：
::highlight(mysearch) { background-color: var(--highlight-bg); color: white; } - JS 注册部分仍需手动创建
Range并调用document.highlightRegistry.set()，相对颜色不参与这一步 - 注意：
::highlight()在 Firefox 和 Safari 完全不可用，Chrome/Edge 128+ 才支持，不能当作通用高亮方案
别误用 light-dark() 实现高亮——它可能让页面崩溃
有人想用 --highlight-color: light-dark(var(--primary), var(--primary-inverted)); 来自动适配明暗主题下的高亮色，但截至 2025 年底，Chromium 存在已知崩溃 Bug（Issue #331406964），尤其当 light-dark() 嵌套在 oklch(from ...) 内部时极易触发。目前稳妥做法仍是分主题写两套变量：
- 明色主题：
:root[data-theme="light"] { --highlight-bg: oklch(from var(--primary) 0.95 c h); } - 暗色主题：
:root[data-theme="dark"] { --highlight-bg: oklch(from var(--primary) 0.25 c h); } - 然后统一在
::selection或组件类中引用var(--highlight-bg)
真正容易被忽略的是：相对颜色语法依赖浏览器对 oklch() 和 from 关键字的支持，而 Safari 目前（2026 年中）仍不支持 oklch()，所有基于它的计算都会退回到 fallback 颜色或失效。如果你的项目必须兼容 Safari，得准备降级方案——比如用 color-mix(in srgb, ...) 或老式 HSL 调整，而不是无脑堆新特性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
