Day26-::first-letter & ::first-line & ::selection 文章段落偽元素

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

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

💠 ::first-letter 基本用法

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

語法

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

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

範例

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

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

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

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

See the Pen ::first-letter by Lala (@bobee) on CodePen.

💠 ::first-line 基本用法

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

語法

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

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

範例

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

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

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

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

See the Pen ::first-line by Lala (@bobee) on CodePen.

💠 ::selection 基本用法

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

語法

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

• 選中被鼠標選取的文字

範例

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

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

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

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

See the Pen ::first-line by Lala (@bobee) on CodePen.

**注意**：並非所有 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 為用戶選取的文字提供自定義的視覺效果。合理使用這些偽元素，能讓網站的排版更具吸引力和可讀性。

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。