8.1 基本概念
在 CSS 中結合偽類和偽元素可以創建強大而靈活的選擇器，根據元素的狀態、結構和內容進行樣式化。這開啟了許多可能性，可以創建複雜和動態的樣式，這些樣式改善了用戶介面和網頁互動體驗。
結合基礎
偽類
偽類用一個冒號（:）來標記，並根據元素的狀態或位置應用。例如：
:hover— 當滑鼠懸停在元素上時應用:first-child— 選擇父元素的第一個子元素
偽元素
偽元素用兩個冒號（::）來標記，用於樣式化元素的部分或添加內容。例如：
::before— 在元素之前添加內容::first-letter— 樣式化元素的第一個字母
結合
偽類和偽元素可以結合來創建複雜的選擇器，這些選擇器可以根據元素的狀態和結構應用樣式。
語法：
selector:pseudo-class::pseudo-element {
properties: values;
}
8.2 結合以增加互動性
例子 1：懸停時樣式化第一個字母
在這個例子中，當滑鼠懸停在段落上時，段落的第一個字母會放大並變成紅色：
CSS
/* 懸停時樣式化段落的第一個字母 */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
HTML
<p>Hover over this paragraph to see the first letter change.</p>
例子 2：焦點時在鏈接前添加內容
在這個例子中，當鏈接獲得焦點時，圖標會在鏈接前添加並變成藍色：
CSS
/* 焦點時在鏈接前添加圖標 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 結合以樣式化結構
例子 3：樣式化 div 中的第一個段落並添加內容
在這個例子中，div 中的第一個段落的第一行將加粗並變成綠色：
CSS
/* 樣式化 div 中的第一個段落的第一行 */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
例子 4：在列表的最後一個元素後添加裝飾元素
在這個例子中，裝飾元素會在列表的最後一個元素後添加並變成紅色：
CSS
/* 在列表的最後一個元素後添加裝飾元素 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 結合以處理複雜條件
例子 5：懸停時樣式化偶數列表元素
在這個例子中，當滑鼠懸停在列表上時，偶數元素會獲得淺灰色背景和藍色文本：
CSS
/* 懸停時樣式化偶數列表元素 */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
例子 6：樣式化已訪問且處於活動狀態的鏈接
在這個例子中，已訪問且處於活動狀態的鏈接會變成橙色並加下劃線：
CSS
/* 樣式化已訪問且處於活動狀態的鏈接 */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 完整實現範例
CSS
/* 樣式化 div 中的第一個段落的第一行 */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* 在列表的最後一個元素後添加裝飾元素 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* 懸停時樣式化偶數列表元素 */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* 焦點時在鏈接前添加圖標 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* 懸停時樣式化段落的第一個字母 */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例子: 結合偽類和偽元素</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>這是 div 中的第一個段落。</p>
<p>這是 div 中的第二個段落。</p>
</div>
<ul>
<li>列表元素 1</li>
<li>列表元素 2</li>
<li>列表元素 3</li>
<li>列表元素 4</li>
</ul>
<a href="#">帶有焦點時圖標的鏈接</a>
<p>將鼠標懸停在該段落上以查看第一個字母的效果。</p>
</body>
</html>
GO TO FULL VERSION