資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用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+ 次瀏覽
廣告