使用span类选择器可精准高亮文本：HTML中用包裹目标文本，CSS中定义对应类样式，支持作用域限定与语义化命名，避免ID或内联style。
直接用 span 类选择器配合行内样式或独立 CSS 规则，就能精准高亮某类文本，不需要动结构、也不影响其他内容。
给目标文本套上带 class 的 span
在 HTML 中，把想高亮的文本用 <span class="highlight">文本</span> 包裹。class 名可自定义（如 hl-keyword、hl-important），语义清晰更易维护。
- ✅ 推荐写法：
<p>这是普通文字，但 <span class="hl-error">这个报错信息</span> 需要醒目</p> - ❌ 避免滥用 ID 或内联 style，不利于复用和主题切换
用类选择器定义高亮样式
在 CSS 中，针对该 class 写规则，控制背景、颜色、边框等。可结合 background-color + color 实现安全可读的高亮效果。
立即学习“前端免费学习笔记（深入）”；
- 基础高亮：
.hl-error { background-color: #ffebee; color: #c62828; padding: 0 4px; border-radius: 3px; } - 强调关键词：
.hl-keyword { background-color: #fff3cd; color: #856404; font-weight: 600; } - 支持继承场景：加
display: inline-block可微调行内对齐，但多数情况保持默认inline即可
进阶：组合选择器限定作用范围
如果只想在特定容器（比如 .article 或 pre code）里生效，用后代或子代选择器限制作用域，避免全局污染。
- 仅在文章段落中生效：
.article p .hl-note { background: #e3f2fd; color: #1976d2; } - 只高亮代码块里的注释：
pre code .hl-comment { color: #616161; font-style: italic; } - 避免冲突：不用
!important，靠选择器权重和顺序管理优先级
基本上就这些。关键是 class 命名合理、样式轻量、作用域明确——不复杂但容易忽略细节。
