虛擬元素

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-sizefont-weight)
  • 文字屬性 (例如 text-decorationword-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}
,瞭解如何調查及移除這項存取權。

::first-line

::first-line 虛擬元素可讓您設定第一行文字的樣式 只有在套用 ::first-line 的元素 display 值為 blockinline-blocklist-itemtable-captiontable-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 個房源
  • animationtransition 資源

您可以使用 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

瀏覽器支援

  • Chrome:57。
  • Edge:79,
  • Firefox:51。
  • Safari:10.1.

資料來源

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

input::placeholder {
  color: darkcyan;
}

::placeholder 僅支援部分 CSS 規則:

  • color
  • background 個房源
  • font 個房源
  • text 個房源
,瞭解如何調查及移除這項存取權。

::cue

瀏覽器支援

  • Chrome:26.
  • Edge:79,
  • Firefox:55。
  • Safari:7.

資料來源

在本導覽虛擬元素導覽中 ::cue 虛擬元素。 這樣您就可以設定 WebVTT 提示的樣式 也就是 <video> 元素的說明文字

您也可以將選取器傳遞至 ::cue 可讓您在字幕「內」設定特定元素樣式。

video::cue {
  color: yellow;
}

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

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

隨堂測驗

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

下列何者不是虛擬元素?

::before
別忘了新增 content: '';
::first-paragraph
CSS 中沒有這項資訊。
::after
別忘了新增 content: '';
::marker
使用清單元素或顯示類型時,這項項目符號會註明。
::pencil
CSS 中沒有這項資訊。
:active
這是虛擬類別,而非虛擬元素。

您可以在 HTML 檔案中找到虛擬元素。

雖然開發人員工具可能會在「元素」面板中顯示虛擬元素,但在 HTML 中找不到虛擬元素,但這些元素為瀏覽器所有。
CSS 可用於指定這類廣告素材,但無法在 HTML 中找到。