当我们需要在网页上展示一段文字，往往需要将某些关键词或短语进行特殊标注，以便吸引用户的注意力。本文将介绍如何使用 CSS 实现文本框内的文本突出显示。
使用 ::selection 伪元素
::selection 是一个用来选择文本框内已选中文本的伪元素，我们可以通过修改它的样式来实现文本的突出显示。具体步骤如下：
- 在 CSS 中定义 ::selection 伪元素的样式。
----------- -
----------------- -------
------ ------
-- 将样式应用到指定的文本框元素上。
------ ----------- --------------------
---------------- -
----------------- -------
------ ------
-- 运行页面，选中文本框内需要突出的文本即可看到效果。
兼容性问题
需要注意的是，::selection 伪元素在不同浏览器之间的兼容性存在差异。例如，在 Firefox 和 Safari 中，只有部分属性（如 color、background-color 等）能够被修改，而在 Chrome 和 Edge 中则可以修改更多的属性。
因此，在实际开发中，为了保证页面的兼容性，建议同时使用两种方法来实现文本的突出显示。
使用 mark 标签
mark 标签是 HTML5 中新增的标签，用于表示需要高亮显示的文本。通过在该标签中包裹需要突出显示的文本，即可实现文本的高亮显示效果。
------ ----------- --------------------
---- -
----------------- -------
------ ------
------- ----------- ---------------------------------
结语
本文介绍了两种实现文本框内文本突出显示的方法，其中 ::selection 伪元素方式的兼容性相对较差，因此建议在实际开发中使用 mark 标签的方式。当然，在某些情况下，也可以通过 JavaScript 来实现更加复杂和丰富的文本突出显示效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24300