在网页排版中，我们经常需要对段落内的部分文本做高亮处理，比如标注重点信息、突出显示搜索关键词等。这类需求不需要改变文本的整体布局，只需要在行内对特定内容做样式区分，使用span标签配合类选择器组合控制是最合适的实现方式。
基础实现思路
span是行内元素，不会破坏文本的原有排版结构，我们可以给需要高亮的文本包裹span标签，再通过类选择器定义高亮的样式规则，就能实现精准的行内高亮控制。
第一步：定义高亮类样式
首先在CSS中定义一个通用的高亮类，设置背景色、文字颜色等基础高亮属性：
/* 定义基础高亮类 */
.highlight {
background-color: #fff3cd; /* 浅黄色背景 */
color: #856404; /* 深棕色文字 */
padding: 0 2px; /* 左右留少量内边距，避免文字贴边 */
border-radius: 2px; /* 轻微圆角让效果更柔和 */
}
第二步：在HTML中使用span包裹目标文本
在需要高亮的文本外层添加span标签，并加上定义好的highlight类：
<p>今天我们要学习的核心内容是<span class="highlight">CSS行内高亮</span>的实现方法，掌握这个技巧可以轻松处理文本重点标注需求。</p>
类选择器组合控制场景
如果页面中有多种不同的高亮需求，比如关键词高亮、错误提示高亮、成功提示高亮，我们可以通过类选择器组合实现不同场景的样式区分。
多类型高亮样式定义
先定义一个基础高亮类，再定义不同场景的扩展类，通过组合使用实现差异化效果：
/* 基础高亮类 */
.highlight {
padding: 0 2px;
border-radius: 2px;
}
/* 关键词高亮 */
.highlight.keyword {
background-color: #fff3cd;
color: #856404;
}
/* 错误提示高亮 */
.highlight.error {
background-color: #f8d7da;
color: #721c24;
}
/* 成功提示高亮 */
.highlight.success {
background-color: #d4edda;
color: #155724;
}
组合类的使用方式
在HTML中给span同时添加基础类和对应场景的类，就能应用对应的高亮样式：
<p>搜索结果中匹配的关键词<span class="highlight keyword">CSS</span>会被高亮显示，如果输入格式错误会提示<span class="highlight error">格式不正确</span>，提交成功后会显示<span class="highlight success">操作完成</span>的提示。</p>
常见问题与解决
高亮样式被其他样式覆盖
如果遇到高亮样式不生效的情况，可能是选择器优先级不够，可以通过提升选择器权重解决：
/* 提升优先级，避免被其他样式覆盖 */
p .highlight.keyword {
background-color: #fff3cd;
color: #856404;
}
高亮背景覆盖行间距
如果高亮背景和上下行文字重叠，可以给高亮类添加行高适配或者上下内边距：
.highlight {
padding: 2px 2px; /* 增加上下内边距 */
line-height: 1.5; /* 适配文本行高 */
}
完整示例代码
以下是一个可直接运行的完整示例，包含三种不同场景的行内高亮效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS行内高亮示例</title>
<style>
.highlight {
padding: 2px 2px;
border-radius: 2px;
line-height: 1.5;
}
.highlight.keyword {
background-color: #fff3cd;
color: #856404;
}
.highlight.error {
background-color: #f8d7da;
color: #721c24;
}
.highlight.success {
background-color: #d4edda;
color: #155724;
}
</style>
</head>
<body>
<p>本示例演示了使用<span class="highlight keyword">span类选择器组合</span>实现行内高亮的方法，错误输入会提示<span class="highlight error">参数无效</span>，配置完成后会显示<span class="highlight success">配置生效</span>的提示。</p>
</body>
</html>