偽類（Pseudo-classes）和 偽元素（Pseudo-elements）

偽類和偽元素

在 CSS 中，偽類和偽元素提供了一種方法，可以選擇和樣式化特定的元素狀態或者特定部分。這些功能使得設計更加靈活和強大。

1. 偽類（Pseudo-classes）

偽類是一種用來選擇元素的特殊狀態的 CSS 選擇器。例如，當元素被鼠標懸停時、當元素是第一個子元素時、或者當元素被聚焦時，偽類都可以用來指定特定樣式。

語法：

selector:pseudo-class {
    property: value;
}

常見偽類

• :hover — 當鼠標懸停在元素上時應用樣式。
• :active — 當元素被點擊並保持激活狀態時應用樣式。
• :focus — 當元素獲得焦點時（例如，輸入框被點擊）應用樣式。
• :first-child — 當元素是父元素的第一個子元素時應用樣式。
• :last-child — 當元素是父元素的最後一個子元素時應用樣式。
• :nth-child(n) — 當元素是父元素的第 n 個子元素時應用樣式。
• :nth-of-type(n) — 當元素是指定類型的第 n 個子元素時應用樣式。
• :not(selector) — 用於選擇不符合指定選擇器的元素。

範例

/* 當鼠標懸停在按鈕上時改變背景顏色 */
.button:hover {
    background-color: #4CAF50;
}

/* 當輸入框獲得焦點時改變邊框顏色 */
input:focus {
    border-color: #3498db;
}

/* 父元素的第一個子元素設置為粗體 */
p:first-child {
    font-weight: bold;
}

2. 偽元素（Pseudo-elements）

偽元素用於選擇元素的某個特定部分或在元素內創建虛擬元素。例如，選擇元素的第一行或第一個字母，或在元素之前或之後插入內容。

語法：

selector::pseudo-element {
    property: value;
}

CSS3 之前，偽元素語法使用單個冒號 (:)，CSS3 開始使用雙冒號 (::) 以區分偽類。舊語法仍被大多數瀏覽器支持。

常見偽元素

• ::before — 用於在元素的內容之前插入內容。
• ::after — 用於在元素的內容之後插入內容。
• ::first-line — 用於選擇元素的第一行。
• ::first-letter — 用於選擇元素的第一個字母。
• ::selection — 用於選擇被用戶選取的文本部分。

範例

/* 使用 ::before 在段落之前添加一個引號 */
p::before {
    content: "“";
    font-size: 2em;
    color: #ccc;
}

/* 使用 ::after 在段落之後添加一個引號 */
p::after {
    content: "”";
    font-size: 2em;
    color: #ccc;
}

/* 選擇並樣式化元素的第一個字母 */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #FF6347;
}

/* 選擇並樣式化被選中的文本 */
::selection {
    background-color: #3498db;
    color: white;
}

3. 偽類與偽元素的區別

• 偽類：用於選擇元素的狀態（如 :hover）或根據結構選擇元素（如 :first-child）。偽類基於元素的狀態或位置改變樣式。
• 偽元素：用於選擇元素的特定部分（如 ::first-letter）或插入虛擬內容（如 ::before 和 ::after）。

4. 實用範例

4.1 製作按鈕的滑動效果

使用偽元素 ::before 或 ::after 來創建滑動效果的按鈕：

.button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background-color: #3498db;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #2ecc71;
    transition: left 0.3s ease;
}

.button:hover::after {
    left: 0;
}

這個例子中，當鼠標懸停在按鈕上時，::after 偽元素從左側滑入，創建出一個滑動效果。

4.2 自訂列表樣式

使用 ::before 偽元素來創建自定義的項目符號列表：

ul.custom-list li {
    position: relative;
    padding-left: 20px;
}

ul.custom-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #3498db;
    font-size: 1.5em;
}

這個範例中，::before 偽元素被用來在每個列表項的左側插入一個自定義的項目符號。

5. 小結

偽類和偽元素是 CSS 中強大的功能，可以選擇特定狀態或部分來樣式化元素。使用偽類和偽元素可以大大提高樣式設計的靈活性，並創建出更豐富和更具互動性的用戶界面。