10.1 偽類
HTML 和 CSS 中的偽類和偽元素讓你可以 根據元素的狀態或內容來設計元素，不用額外增加 class 或修改 HTML 結構。這些功能讓你可以做出互動性和美觀兼具的網頁。
偽類應用在基於元素狀態或在文件結構中位置的情況下，可在各種情境下設計元素，比如鼠標懸停、聚焦或選定元素。偽類使用 冒號 (:) 開頭。
最簡單的偽類：
偽類 :hover 用於當使用者將鼠標懸停在某元素上時。
HTML
<button type="button">按鍵</button>
CSS
button:hover {
color: red;
}
偽類 :focus 用於當元素獲得焦點時，像是點擊輸入框。
HTML
<input type="text">
CSS
input:focus {
outline-color: blue;
}
偽類 :active 用於當元素處於激活狀態時，例如點擊鏈接或按鈕。
HTML
<button type="button">按鍵</button>
CSS
button:active {
background-color: green;
}
偽類 :visited 用於已被使用者訪問過的鏈接。
HTML
<a href="#">鏈接</a>
CSS
a:visited {
color: purple;
}
10.2 偽元素
偽元素用於設計非獨立 HTML 元素的一部分。它們以雙 冒號 (::) 開頭。偽元素用於產生並設計在元素前後的內容，或是設計元素的第一行或第一個字母，等等。
最簡單的偽元素：
偽元素 ::before 在元素內容之前插入內容。
HTML
<p>我叫 Stepan。</p>
CSS
p::before {
content: "你好! ";
color: blue;
}
偽元素 ::after 在元素內容之後插入內容。
HTML
<p>注意！</p>
CSS
p::after {
content: " 感謝注意!";
color: red;
}
偽元素 ::first-line 作用在元素的第一行。它只設計文本的第一行。
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
CSS
p::first-line {
font-weight: bold;
color: green;
}
偽元素 ::selection 用於使用者選定的文本。
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
CSS
::selection {
background-color: blue;
color: yellow;
}
試著選取結果中的文字。
10.3 偽元素的使用範例
HTML 和 CSS 中的偽類和偽元素提供了優秀的設計元素的可能性，基於它們的狀態或內容。他們允許你創建更互動和視覺美觀的網頁，而無需改變 HTML 的結構。
範例 1: 在鏈接文本前插入圖示
HTML
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">這是帶圖示的鏈接</a>
</body>
</html>
範例 2: 在段落後添加設計過的區塊
HTML
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>這是一段文本。</p>
</body>
</html>
組合使用
偽類和偽元素可以組合使用，以創建複雜且功能強大的樣式。
範例: 設計鏈接內的選定文本在懸停時的樣式
HTML
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">選取這段文本，然後將鼠標懸停於其上。</a>
</body>
</html>
GO TO FULL VERSION