在
網(wǎng)站開發(fā)中我們經(jīng)常會提到偽靜態(tài)，偽元素是 CSS 中一個有趣的部分。它們允許您對設(shè)計進行很多小的調(diào)整。然而，尤其是初學者一開始可能會被它們弄糊涂。在下文中，我們將為您提供 CSS 偽元素的初學者指南。我們將解釋它們是什么、它們?nèi)绾喂ぷ饕约澳梢允褂盟鼈冏鍪裁础?br />
為了解釋什么是偽元素，最好從一個例子開始。這是一個非常簡單的 HTML 頁面，其中包含一個指向樣式表的鏈接和一個單獨的段落元素。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>CSS pseudo-element test</p>
</body>
</html>
但是，當我們在瀏覽器中查看頁面時，它是這樣的：CSS pseudo-element test，您可能會注意到出現(xiàn)在段落前面的箭頭，即使它不存在于 HTML 文檔中。這是因為鏈接的樣式表包含以下標記：p::before {content: "→ ";}
上面是一個相當標準的 CSS 選擇器。然而，突出的是before它后面的雙冒號加號。那是我們的偽元素。在這種情況下，它做了一件非常簡單的事情，它在目標選擇器的內(nèi)部 HTML 前面添加一個元素，并放置在其值中定義的內(nèi)容。在這種情況下，這是一個箭頭，目標元素是頁面上的每個段落元素。然而，有趣的是箭頭并沒有出現(xiàn)在 HTML 本身中。相反，您只能看到一個偽元素并且可以檢查其內(nèi)容。這是瀏覽器開發(fā)人員工具中的樣子：
這種表現(xiàn)得像元素而不是元素的傾向就是偽元素得名的原因。正如我們將在下面的示例中看到的那樣，它還對他們的行為有一些影響。
除了上述::before元素，另一個最流行的偽元素是::after。顧名思義，它的作用與目標相同，::before只是在目標的末尾創(chuàng)建子元素。
除了這兩個，還有這些元素：
::backdrop – 創(chuàng)建一個與用戶視口一樣大的框，允許您為任何轉(zhuǎn)為全屏的元素（例如視頻）的背景設(shè)置樣式。
::cue – 您可以使用它來設(shè)置 WebVTT 提示的樣式，這意味著視頻中的字幕和標題等內(nèi)容。
::first-letter– 定位塊級元素（例如p，h2，div）中第一行的第一個字母。這也可能意味著在::before元素內(nèi)部。
::first-line– 與::first-letter塊元素的整個第一行相同，但針對整個第一行。
::file-selector-button– 創(chuàng)建一個<input>元素的按鈕type="file"。
::marker – 使您可以設(shè)置列表項標記的樣式，例如項目符號列表或編號列表。
::part()– 允許您在"part="用名稱標記的影子樹中定位特定的 HTML 元素。Shadow-tree 元素是通過 JavaScript 添加的。更多信息在這里。
::placeholder– 使用它來設(shè)置內(nèi)部<input>和<textarea>元素的占位符文本的樣式。
::selection – 一個 CSS 偽元素，您可以使用它對用戶突出顯示的文本應(yīng)用樣式（例如，通過單擊并拖動光標）。
::slotted()- 目標元素標記<slot>為樣式。
除此之外，瀏覽器還沒有完全支持一些偽元素（或者，在某些情況下，根本不支持）：
::cue-region – 然而，也用于樣式化字幕和標題，將它們作為一個整體而不是單獨定位。
::grammar-error– 以特定方式標記瀏覽器已識別為語法錯誤的文本。目前不支持任何瀏覽器。
::spelling-error– 類似于::grammar-error但拼寫錯誤。目前也不支持任何瀏覽器。
::target-text– 允許您設(shè)置瀏覽器通過鏈接跳轉(zhuǎn)滾動到的文本的樣式。目前瀏覽器支持仍然有點參差不齊。
