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

在网站设计和开发中，样式化文本是一个关键的方面。为此，CSS（层叠样式表）是一种强大的工具。CSS是一种多功能工具，可以以各种方式修改文本的外观。其中最受欢迎的技术之一是更改选定文本的颜色。在本文中，我们将学习使用CSS更改选定文本颜色的两种技术。

::selection伪元素

::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元素内的文本颜色为白色，并将所选文本的背景颜色设置为红色。

示例

这是一个示例，将所选的<h1>文本颜色设置为白色，背景颜色设置为红色，<h2>文本颜色设置为红色，背景颜色设置为黄色，以及<p>文本颜色设置为蓝色，背景颜色设置为粉色。

<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>