17370845950

使用span类选择器可精准高亮文本：HTML中用包裹目标文本，CSS中定义对应类样式，支持作用域限定与语义化命名，避免ID或内联style。

直接用 span 类选择器配合行内样式或独立 CSS 规则，就能精准高亮某类文本，不需要动结构、也不影响其他内容。

给目标文本套上带 class 的 span

在 HTML 中，把想高亮的文本用 文本 包裹。class 名可自定义（如 hl-keyword、hl-important），语义清晰更易维护。

• ✅ 推荐写法：

  这是普通文字，但 这个报错信息 需要醒目

• ❌ 避免滥用 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 命名合理、样式轻量、作用域明确——不复杂但容易忽略细节。