如何使用 CSS 更改选定文本的颜色？

百变鹏仔 4周前 (09-20) #CSS

文章标签如何使用

网站上的文本样式是网页设计和开发的一个重要方面。为此，CSS（层叠样式表）是一个可供您使用的强大工具。 CSS 是一种多功能工具，允许以各种方式操纵文本的外观。最受追捧的技术之一是更改所选文本的颜色。在本文中，我们将学习两种使用 CSS 更改所选文本颜色的技术。

::选择伪元素

::selection 伪元素是一个强大的功能，使我们能够选择用户当前突出显示的文本并为其设置样式。要更改所选文本的颜色，我们使用 color 属性。例如，如果我们想让所选文本显示为栗色，我们将使用以下 CSS -

::selection {   color: red;}

这会将整个网页的所选文本颜色更改为红色。

示例

以下示例将所选文本的颜色更改为红色，背景颜色更改为黑色。

立即学习“前端免费学习笔记（深入）”；

<html ><head>   <title>Change the color of selected text using CSS?</title>   <style>      ::selection {         color: red;         background-color:black;      }   </style></head><body>   <h2>Changing the color of selected text using CSS</h2>   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an    unknown printer took a galley of type and scrambled it to make a type specimen book.   It has survived not only five centuries, but also the leap into electronic typesetting</p></body></html>

通过使用特定元素或类

我们可以更改特定元素或类上选定文本的颜色和背景颜色。例如，我们可以使用以下 CSS 更改特定“h1”标签内选定文本的颜色 -

h1::selection {   background: red;   color: white;}

这会将 h1 元素中选定文本的颜色更改为白色，并将选定文本的背景颜色更改为红色。

示例

以下示例将选定的

文本颜色更改为白色，背景颜色更改为红色，

文本更改为红色，背景更改为黄色，

文本更改为蓝色，背景颜色更改为粉色。

<html>   <title>Change the color of selected text using CSS</title>   <style>      h1::selection {         background: red;         color: white;      }      h2::selection {         background: yellow;         color: red;      }      p::selection {         background: pink;         color: blue;      }   </style></head><body>   <h1>Welcome to tutorialsPoint</h1>   <h2>Change the color of selected text using CSS</h2>   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown    printer took a galley of type and scrambled it to make a type specimen book. It has survived    not only five centuries, but also the leap into electronic typesetting</p></body></html>

结论

使用 CSS 更改所选文本的颜色是一项简单的任务，可以通过利用 ::selection 伪元素来完成。通过使用颜色和背景颜色属性，我们可以更改网站上所选文本的外观。此外，我们可以在特定元素或类上使用 ::selection 伪元素，以更精确地控制所选文本的样式。

文章推荐

如何使用 CSS 更改选定文本的颜色？

::选择伪元素

示例

通过使用特定元素或类

示例

文本颜色更改为白色，背景颜色更改为红色，

文本更改为红色，背景更改为黄色，

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写