CSS高亮关键字：mark标签与选择器实战技巧

本文详解了如何利用语义化、标准且轻量的 `` 标签配合 CSS 选择器实现灵活可控的关键字高亮：既支持手动标记以保证精准与可维护性，也提供 JavaScript 动态替换方案应对搜索等实时场景，还能通过 class 或 data 属性结合属性选择器实现多类型差异化样式；同时兼顾可访问性（屏幕阅读器友好）与视觉一致性，无需第三方库，不破坏 HTML 结构，是现代 Web 开发中高亮关键词的推荐实践。

想高亮页面中特定关键字，最自然、语义正确又容易控制样式的方式，就是用 标签包裹目标文字，再配合 CSS 选择器统一设置高亮样式。

用 标签手动标记关键词

这是最直接可控的方法：在 HTML 中把需要高亮的词用 包起来。它本身就有默认黄底样式，但你可以完全自定义：

• 搜索结果包含JavaScript和CSS相关内容。

• 然后加一句 CSS 就能统一改所有高亮效果：
  mark { background-color: #ffeb3b; color: #212121; padding: 0 4px; border-radius: 3px; }

用 JavaScript 动态高亮（适合搜索/过滤场景）

如果关键字来自用户输入或需实时匹配，就得用 JS 找到文本并替换为 。注意要避免破坏原有 HTML 结构：

• 只操作文本节点，避开已有标签；
• 用正则匹配时加上 g 和 i 标志（全局+忽略大小写）；
• 简单示例：
  element.innerHTML = element.textContent.replace(/keyword/gi, '$&');
  （实际项目建议用更安全的 DOM 操作，比如 document.createRange()）

用属性选择器精准控制某类 mark

如果不同场景需要不同颜色（比如“错误关键词”红底、“推荐词”绿底），可以给 加 class 或 data 属性：

• 404 → mark.error { background: #f44336; }
• React → mark[data-type="suggestion"] { background: #4caf50; }

注意可访问性与样式重置

是语义化标签，屏幕阅读器会读作“highlighted”，这点很好。但默认样式可能和整体设计不搭，建议：

• 显式设置 color，避免黄底白字在浅色主题下看不清；
• 加 padding 和 border-radius 提升视觉舒适度；
• 如需去除默认样式（比如只加下划线），用 mark { background: transparent; text-decoration: underline; }

基本上就这些—— + 选择器是轻量、标准、易维护的高亮方案，不需要额外库，也不污染结构。

本篇关于《CSS高亮关键字：mark标签与选择器实战技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！