虛擬元素

CSS Podcast - 014: 擬似元素

如果你有文章內容，並且想讓第一個字母變成更大的首字母，該如何達成？

在 CSS 中，您可以使用 ::first-letter 疑似元素來實現這類設計細節。

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

虛擬元素就像是新增或指定額外元素，但不必額外新增 HTML。這個使用 ::first-letter 的範例解決方案是眾多擬造元素之一。這些元素具有多種角色，您將在本課程中瞭解可用的擬造元素，以及如何使用這些元素。

::before和::after

::before 和 ::after 擬似元素會在元素中建立子元素，但只有您定義 content 屬性時才會。

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content 可以是任何字串，甚至是空字串，但請注意，除了空字串以外，螢幕閱讀器可能會朗讀其他字串。您可以新增圖片 url，系統會以原始尺寸插入圖片，因此無法調整圖片大小。你也可以插入 counter。

建立 ::before 或 ::after 元素後，您可以自由設定樣式，沒有任何限制。您只能將 ::before 或 ::after 元素插入可接受子項的元素 (含有文件樹狀結構的元素)，因此 <img />、<video> 和 <input> 等元素無法使用。

::first-letter

我們在課程一開始時就遇到這個擬似元素。請注意，指定 ::first-letter 時，並非所有 CSS 屬性都能使用。可用的屬性如下：

• color
• background 項資源 (例如 background-image)
• border 項資源 (例如 border-color)
• float
• font 屬性 (例如 font-size 和 font-weight)
• 文字屬性 (例如 text-decoration 和 word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

只有在套用 ::first-line 的元素 display 值為 block、inline-block、list-item、table-caption 或 table-cell 時，::first-line 擬元素才能讓您設定第一行文字的樣式。

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

就像 ::first-letter 虛擬元素一樣，您只能使用部分 CSS 屬性：

• color
• background 個房源
• font 個房源
• text 個房源

::backdrop

如果您有以全螢幕模式顯示的元素，例如 <dialog> 或 <video>，您可以使用 ::backdrop 擬造元素，為背景 (元素與頁面其餘部分之間的空間) 設定樣式：

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker 擬似元素可讓您為清單項目的項目符號或數字，或 <summary> 元素的箭頭設定樣式。

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker 僅支援少數 CSS 屬性：

• color
• content
• white-space
• font 個房源
• animation 和 transition 屬性

您可以使用 content 屬性變更標記符號。您可以使用這個方法，為 <summary> 元素的關閉和空白狀態設定加號和減號符號。

::selection

::selection 擬似元素可讓您設定所選文字的外觀樣式。

::selection {
  background: green;
  color: white;
}

這個偽元素可用於為所有所選文字套用樣式，如上方示範所示。您也可以搭配其他選取器使用，以便更精確地選取所需的項目。

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

與其他擬似元素一樣，只有部分 CSS 屬性可用於此元素：

• color
• background-color，但不是 background-image
• text 個房源

::placeholder

您可以為表單元素新增輔助提示，例如含有 placeholder 屬性的 <input>。::placeholder 擬似元素可讓您為文字設定樣式。

input::placeholder {
  color: darkcyan;
}

::placeholder 僅支援 CSS 規則的子集：

• color
• background 個房源
• font 個房源
• text 個房源

::cue

最後一個偽元素是 ::cue 偽元素。這可讓您為 WebVTT 提示設定樣式，這些提示是 <video> 元素的字幕。

您也可以將選取器傳遞至 ::cue，這樣就能在標題「內部」設定特定元素的樣式。

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

進行隨堂測驗

測驗您對擬元素的瞭解程度