虛擬元素

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

我們在課程開始時介紹了這個虛擬元素。 要注意的是，並非所有 CSS 屬性都能用於指定目標 ::first-letter。 可用的屬性如下：

• 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 虛擬元素可讓您設定第一行文字的樣式 只有在套用 ::first-line 的元素 display 值為 block 時 inline-block、list-item、table-caption 或 table-cell。

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 */
}

只有少數 CSS 屬性支援 ::marker：

• 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;
}

隨堂測驗

測試您對虛擬元素的相關知識