在前面我們探討了偽類選擇器，接下來我們將進一步了解「偽元素」選擇器。

偽元素允許開發者選取並操控元素中特定的部分或內容，這樣可以在不改變 HTML 結構的情況下，實現更靈活的設計。偽元素的語法是以雙冒號 :: 開頭，本文將介紹三個實用的偽元素：::first-letter、::first-line 和 ::selection，它們特別適合在文章段落中使用。

💠 ::first-letter 基本用法

::first-letter 偽元素可以用來選取區塊元素中第一行的第一個字母，並為其添加特殊樣式。這常被用於報紙、雜誌風格的首字母放大效果。

語法

選擇器::first-letter { 
	屬性名: 屬性值; 
}

• 選中元素中的第一個文字

範例

一起試試：［CODEPEN］

在以下範例中，第一行的首字母將被放大並改變顏色：

<p>
  天青色等煙雨 而我在等妳
  炊煙裊裊昇起 隔江千萬里
  在瓶底書漢隸仿前朝的飄逸
  就當我為遇見妳伏筆

  天青色等煙雨 而我在等妳
  月色被打撈起 暈開了結局
  如傳世的青花瓷自顧自美麗 妳眼帶笑意
</p>

p::first-letter {
	color: red;
	font-size: 40px;
	font-weight: bold;
}

💠 ::first-line 基本用法

::first-line 用來選取區塊元素中的第一行文字。這在需要為段落中的首行添加特殊樣式時非常實用，例如加粗、改變顏色或背景色。

語法

選擇器::first-line { 
	屬性名: 屬性值; 
}

• 選中元素中的第一行文字

範例

一起試試：［CODEPEN］

下面的範例將第一行文字設為螢光背景色：

<p>
  天青色等煙雨 而我在等妳
  炊煙裊裊昇起 隔江千萬里
  在瓶底書漢隸仿前朝的飄逸
  就當我為遇見妳伏筆

  天青色等煙雨 而我在等妳
  月色被打撈起 暈開了結局
  如傳世的青花瓷自顧自美麗 妳眼帶笑意
</p>

p::first-line {
	background-color: yellow;
}

💠 ::selection 基本用法

::selection 偽元素可以自定義用戶在選取文字時的樣式。這常見於需要突出選取文字時，比如改變選中範圍的背景色或字體顏色。

語法

選擇器::selection { 
	屬性名: 屬性值; 
}

• 選中被鼠標選取的文字

範例

一起試試：［CODEPEN］

當用戶選取文字時，會顯示粉紅色背景：

<p>
  天青色等煙雨 而我在等妳
  炊煙裊裊昇起 隔江千萬里
  在瓶底書漢隸仿前朝的飄逸
  就當我為遇見妳伏筆

  天青色等煙雨 而我在等妳
  月色被打撈起 暈開了結局
  如傳世的青花瓷自顧自美麗 妳眼帶笑意
</p>

p::selection {
	background-color: pink;
}

注意：並非所有 CSS 屬性都能應用於 ::selection。常用的屬性包括 background-color 和 color，但不支持邊框等其他樣式。

💠 偽元素的歷史與規則

在前面的範例中，我們已經可以知道偽元素是以雙冒號 :: 為開頭，而偽類是以單冒號 : 開頭 ，但在某些偽元素，如 ::first-letter 、::first-line ，如果用單冒號 : 也是可以執行的

p:first-letter {
	color: red;
	font-size: 40px;
	font-weight: bold;
}

p:first-line {
	background-color: yellow;
}

為什麼呢？

這是因為在 CSS2 中，偽元素跟偽類一樣是以單冒號 : 為開頭的。

這導致了它們之間難以區分，所以在 CSS2.1 時，偽元素開始支持以雙冒號 :: 為開頭，而因為在過去的版本偽元素支援 : ，所以現在也是可以兼容這種形式

不過在 CSS3 中，為了更好地區分偽類與偽元素，偽元素改為雙冒號 ::。現代瀏覽器支持兩者，但推薦使用雙冒號語法，以符合新的標準。

💠 總結

偽元素選擇器提供了一種不改變 HTML 結構的方式，讓開發者可以靈活地控制文章段落中特定部分的樣式。::first-letter 用來強調段落的首字母，::first-line 改變首行文字樣式，::selection 為用戶選取的文字提供自定義的視覺效果。合理使用這些偽元素，能讓網站的排版更具吸引力和可讀性。

本文將同步更新至 Lala Code