HTML代码中mark标签结合CSS变量高亮文中关键句子-html教程-PHP中文网

用 css 变量解耦 mark 样式：在 :root 定义 --mark-bg 和 --mark-color，mark 选择器中引用并添加 padding 与 border-radius；深色模式用 @media (prefers-color-scheme: dark) 重置变量值；多语义场景通过 class（如 .highlight、.pending）作用域化变量；框架中应将变量注入父容器而非 mark 自身。

html代码中mark标签结合css变量高亮文中关键句子

mark 标签默认样式太刺眼，怎么用 CSS 变量控制背景色？

mark 默认是亮黄色背景 + 黑色文字，和多数现代 UI 不协调，尤其深色主题下几乎不可读。直接写死颜色会破坏主题切换能力，必须用 CSS 变量解耦。

推荐在 :root 或组件作用域里定义变量，再通过 mark 选择器引用：

:root {
  --mark-bg: #ffeb3b;
  --mark-color: #212121;
}

mark {
  background-color: var(--mark-bg);
  color: var(--mark-color);
  padding: 0.1em 0.25em;
  border-radius: 2px;
}

注意：别漏掉 padding 和 border-radius，否则高亮块边缘生硬、贴字太紧；var(--mark-bg) 必须带单位（如 #ffeb3b）且不能为空，否则回退到浏览器默认色。

深色模式下 mark 背景发灰看不清？用 prefers-color-scheme 切换变量

单纯靠 JS 监听主题变化太重，CSS 原生支持更轻量。用 @media (prefers-color-scheme: dark) 重置变量值即可：

@media (prefers-color-scheme: dark) {
  :root {
    --mark-bg: #696969;
    --mark-color: #fff;
  }
}

关键点：

变量名保持一致，只改值，避免 JS 重复读取
--mark-bg 在暗色模式下别用纯黑（#000），否则和背景融成一片；#696969 这类中灰更安全
不要在 mark 选择器里写 !important，优先级会被媒体查询覆盖，反而失效

想让不同语义的 mark 用不同颜色？用 class 区分变量作用域

一个页面可能有「强调」「待确认」「引用来源」等多种高亮需求，全靠一个 --mark-bg 不够用。给 mark 加 class 是最稳妥的方案：

<mark class="highlight">这是重点</mark><mark class="pending">待核实</mark>

对应 CSS：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

mark.highlight {
  --mark-bg: #e8f5e9;
  --mark-color: #1b5e20;
  background-color: var(--mark-bg);
  color: var(--mark-color);
}

mark.pending {
  --mark-bg: #fff3cd;
  --mark-color: #856404;
  background-color: var(--mark-bg);
  color: var(--mark-color);
}

要点：

变量声明写在具体 class 里，不污染全局 :root
每个 class 都要显式写 background-color: var(--mark-bg)，CSS 变量不会自动继承
避免用 mark[role="note"] 这类属性选择器——语义不清晰，且无法配合变量做样式隔离

Vue/React 里动态切换 mark 颜色，为什么 CSS 变量没更新？

常见错误是把变量写死在组件 style 里，比如：<mark :style="{ '--mark-bg': theme === 'dark' ? '#424242' : '#fff9c4' }"></mark>。这看似可行，但实际会触发两次重绘，且无法被媒体查询覆盖。

正确做法是把变量注入到组件根元素上：

<div :class="theme" :style="{ '--mark-bg': markBg, '--mark-color': markColor }">
  <mark>动态高亮</mark>
</div>

然后 CSS 写成：

[class~="dark"] mark {
  background-color: var(--mark-bg, #424242);
  color: var(--mark-color, #fff);
}

注意：

用 [class~="dark"] 而不是 .dark，避免 class 名含空格时匹配失败
var(--mark-bg, #424242) 的 fallback 值必须存在，否则变量未定义时会显示默认黄色
不要在 mark 上直接绑定 style —— 它会覆盖你之前写的 background-color: var(--mark-bg)

变量作用域和重绘时机比想象中敏感，改一个值，最好连带检查父容器是否重新计算了 CSSOM。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！