如何使用CSS更改选中文字的颜色？

使用CSS更改选中文字的颜色是一项简单的任务，可以使用::selection伪元素来实现。

在这篇文章中，我们有一些使用各种HTML标签编写的文本内容，我们的任务是使用CSS更改选中文字的颜色。

使用CSS更改选中文字的颜色

  • 在**示例1**中，我们有一个div元素、一个H3元素和一个p元素，其中包含一些文本。
  • 我们使用了**"::selection"** 伪元素选择器，它可以更改HTML文档中任何选中文本的背景颜色和文本颜色。
  • 在**示例2**中，我们有一个div、section和article元素，其中包含一些文本。
  • 然后我们使用特定的元素来更改选择时的颜色和背景颜色。例如，**"div::selection"**更改div元素选中文本的样式，类似地，**"section::selection"**和**"article::selection"**分别更改section和article标签选中文本的样式。

示例1

以下是实现上述步骤以使用CSS更改选中文字颜色的完整示例代码。

<html>
<head>
    <title>
        To change the color of selected text using CSS
    </title>
    <style>
        ::selection {
            color: white;
            background-color: #04af2f;
        }
    </style>
</head>
<body>
    <h3>
        Changing the Color of Selected Text Using CSS
    </h3>
    <p>
        In this example we have used <strong>::selection
        </strong>psuedo element on div to change the 
        color of selected text using CSS.
    </p>
    <div>
        Select any text to change it's background and 
        text color.
    </div>
</body>
</html>

示例2

以下是实现上述步骤以使用CSS更改选中文字颜色的完整示例代码。

<html>
<head>
    <title>
        To change the color of selected text using CSS
    </title>
    <style>
        div::selection {
            color: white;
            background-color: #04af2f;
        }
        section::selection {
            color: white;
            background-color: #16031f;
        }
        article::selection {
            color: rgb(243, 91, 49);
            background-color: #eeb1fa;
        }
    </style>
</head>
<body>
    <h3>
        Changing the Color of Selected Text Using CSS
    </h3>
    <p>
        In this example we have used <strong>::selection
        </strong>psuedo element on div, section and article  
        tags to change the color of selected text using CSS.
    </p>
    <div>
        Select this div element to change the background  
        color and text color.
    </div>
    <section>
        Select this section element to change the background 
        color and text color.
    </section>
    <article>
        Select this article element to change the background 
        color and text color.
    </article>
</body>
</html>

结论

使用CSS更改选中文字的颜色是一项简单的任务，可以通过使用::selection伪元素来实现。通过使用color和background-color属性，我们可以更改网站上选中文本的外观。此外，我们可以对特定元素或类使用::selection伪元素，以便更精确地控制选中文本的样式。

更新于：2024年8月22日

6K+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告