目标与基本原理
为什么选择 span 作为高亮的承载元素
在网页文本的局部强调中，行内高亮通常需要一个行内容器来包裹目标文本。span是最常用的无语义、轻量的内联标签，搭配自定义类能实现对任意文本的局部样式覆盖。通过使用 class="hl" 或者自定义的类，可以实现统一的高亮风格。span 类选择器让高亮的策略从结构上变得可复用。
本教程聚焦于 span 类选择器实现特定文本的行内高亮与组合控制，通过为目标文本添加 span 并应用不同的类来实现不同的高亮风格与组合规则。核心点包括内联展示、可检索性与可维护的样式库。
要点还包括如何避免影响文本的流式排版：尽量使用轻量的背景色、适度的填充和边角圆润来提升可读性，同时确保高亮文本在不同主题和设备上的对比度满足无障碍要求。
基础样式实现示例
在最简单的场景中，目标文本被一个 span 包裹，并应用一个简单的高亮类。此处的关键是保证行内元素不打断文本行，并且能被快速重用。
/* 基础高亮 */
span.hl {background: #fffa90;color: #1a1a1a;padding: 0 0.25em;border-radius: 0.25em;
}
可复用性：通过为高亮定义固定的变量、颜色方案和边距，能够在不同文本中重复使用。若页面主题变更，只需调整变量即可实现全局一致性。
组合控制的选择策略
简单组合与层级限定
除了直接在文本上应用类，还可以利用 组合选择器 来限定高亮的范围，从而避免全局样式干扰。
例如，若页内有多个段落，但只希望在某些区域显示高亮，可以通过父级容器来限定 span.hl 的作用域。
这使得同一份 CSS 代码能在多处重用，同时减少样式冲突，是实现 组合控制 的关键。
示例：限定容器内的高亮
下面的规则仅在 .article 容器中的 span.hl 生效，其他区域不受影响，体现了对上下文的控制。
/* 仅在 .article 容器内生效的高亮 */
.article span.hl {background: #ffd;border-bottom: 2px solid #f0c;
}
在实际页面中，可以将高亮与不同背景、文本颜色组合，形成清晰的对比。此处的关键是上下文限定和样式复用的平衡。
同样可以结合状态伪类实现交互式高亮，例如鼠标悬停时改变背景色。状态伪类在提升可用性方面很有帮助。
高级技巧：数据驱动的高亮与组合控制
数据属性驱动的高亮规则
除了传统的 class 定义，可以通过自定义数据属性实现更灵活的高亮策略。
当目标文本带有 data-highlight 属性时，CSS 可以据此进行选择，从而实现分级或场景化高亮。
示例：基于 data-highlight 的高亮
此示例使用属性选择器来识别需要高亮的文本，避免对 HTML 结构进行大量变更。
/* 基于数据属性的高亮控制 */
span[data-highlight="true"] {background: #ffe08a;color: #111;padding: 0 0.25em;border-radius: 0.25em;
}
结合 JavaScript 可实现动态赋值，例如在搜索高亮时对搜索结果应用 data-highlight="true"。这样增强了交互性与可维护性。
