虛擬元素簡介：

虛擬元素（pseudo-elements）是 CSS 中的一種特殊選擇器，用於選擇和樣式化元素的特定部分，而不是整個元素本身。虛擬元素經常用於在不修改 HTML 結構的情況下，增加額外的內容或對元素的某個部分進行定制樣式。

一句話解釋：讓CSS幫忙做HTML該做的事，甚至是加一些 HTML 裡面沒有的東西，這樣我們不用碰 HTML。

常見的虛擬元素包括：

1. ::before 和 ::after：

   • 這兩個虛擬元素用於在選定的元素內容之前或之後插入內容。需要搭配 content 屬性來指定要插入的內容。

   • 範例： 這個例子會在每個 <p> 標籤的內容之前插入 "提示: " 字樣，並且字樣顏色為藍色。

     p::before {
       content: "提示: ";
       color: blue;
     }
     
     

2. ::first-line：

   • 用於選擇元素的第一行文本。例如，可以為段落的第一行文字設置特殊的樣式。

   • 範例： 這個例子將使每個 <p> 標籤的第一行文字加粗。

     p::first-line {
       font-weight: bold;
     }
     
     

3. ::first-letter：

   • 用於選擇元素的第一個字母。常用於製作大寫首字母（drop cap）效果。

   • 範例： 這個例子將使每個 <p> 標籤的第一個字母放大兩倍並變成紅色。

     p::first-letter {
       font-size: 2em;
       color: red;
     }
     
     

4. ::marker：

   • 用於修改列表項目的標記符號（如點、數字等）。

   • 範例： 這個例子會將列表項目的標記符號顏色設為綠色。

     li::marker {
       color: green;
     }
     
     

虛擬元素可以幫助開發者更靈活地控制和設計網頁元素的外觀，無需直接在 HTML 中進行變更。這使得設計更加可維護且容易更新。

具體事例：valid與invalid

在 CSS 中，::valid 和 ::invalid 是兩個虛擬元素，用來根據表單輸入元素的驗證狀態來設置樣式。這些虛擬元素可以用來自動為符合或不符合驗證規則的表單元素添加樣式，使得用戶能夠即時看到輸入是否有效。

::valid 和 ::invalid 的用途

• ::valid：用於選擇那些符合驗證要求的輸入元素。當用戶的輸入滿足 <input> 或 <textarea> 元素中設定的驗證條件（例如 required、pattern 等）時，這個虛擬元素會被應用。
• ::invalid：用於選擇那些不符合驗證要求的輸入元素。當用戶的輸入不符合驗證條件時，這個虛擬元素會被應用。

如何使用

範例 1：設定 ::valid 和 ::invalid 樣式

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>

  <label for="phone">Phone (123-456-7890):</label>
  <input type="text" id="phone" pattern="\\\\d{3}-\\\\d{3}-\\\\d{4}" required>

  <button type="submit">Submit</button>
</form>