核心要點(diǎn)

• CSS偽元素是頁面上並非HTML代碼中存在的元素，它們可以使用任何應(yīng)用於其他元素的CSS樣式進(jìn)行操作。
• CSS中的:before和:after偽元素可用於生成頁面內(nèi)容，包括文本、圖像、屬性值和計(jì)數(shù)器。它們還可用於創(chuàng)建具有最少標(biāo)記的複雜形狀。
• CSS中的各種偽元素包括:first-line、:first-letter、:selection、:before和:after。這些可用於設(shè)置元素特定部分的樣式，在元素內(nèi)容前後插入內(nèi)容，以及設(shè)置塊級(jí)元素的首字母或首行樣式等等。

視頻講解 (加載播放器中……) 本視頻是AtoZ CSS系列的一部分。您可以在此處找到該系列的其他內(nèi)容。

文字記錄

CSS偽元素是頁面上不在HTML代碼中出現(xiàn)的元素。

它們可以使用應(yīng)用於任何其他元素的任何CSS樣式進(jìn)行操作。

兩個(gè)特殊的偽元素——:before和:after——可用於從CSS生成頁面內(nèi)容，並具有許多潛在的用例。

在本節(jié)中，我們將學(xué)習(xí)：

• 五種不同的偽元素
• 從CSS生成文本、圖像屬性值和計(jì)數(shù)器等內(nèi)容
• 如何使用最少的標(biāo)記創(chuàng)建複雜的形狀

偽元素

CSS中有五個(gè)偽元素：

• :first-line
• :first-letter
• :selection
• :before
• :after

這些與偽類通過雙冒號(hào)區(qū)分，但為了簡(jiǎn)潔起見，通常在CSS中使用單冒號(hào)編寫。

這裡有一段很長(zhǎng)的佔(zhàn)位符文本塊引用。我可以使用:first-line更改文本首行的顏色，即使文本重新調(diào)整格式後也適用。我可以通過使用浮動(dòng)和更大的字體大小設(shè)置:first-letter的樣式來創(chuàng)建一個(gè)首字母大寫效果。我還可以使用:selection更改所選文本的顏色。

我可以使用:before和:after偽元素在塊引用前後添加大引號(hào)。文本從content屬性生成，然後可以使用CSS樣式來獲得所需的效果。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

生成內(nèi)容

使用:before和:after偽元素允許我們向頁面添加各種不同的內(nèi)容。

我們已經(jīng)看到如何向頁面添加文本內(nèi)容，但我們也可以添加圖像、屬性值、計(jì)數(shù)器或空字符串，只需訪問這兩個(gè)額外的元素即可。

添加圖像類似於使用url()添加背景圖像。在這裡，使用url()作為content屬性的值。我實(shí)際上更喜歡使用背景圖像，並通過為content創(chuàng)建空字符串來訪問偽元素。這提供了對(duì)圖像的更多控制，因?yàn)樗谐Ｓ玫膶傩裕ㄈ?code>background-position、background-repeat和background-size）都可用。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

也可以使用content屬性將HTML屬性的值注入頁面。在創(chuàng)建打印樣式表時(shí)，我喜歡添加以下代碼片段以輸出鏈接的URL，以便可以從頁面讀取它們：

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

這將為任何不是內(nèi)部鏈接或哈希鏈接的鏈接在鏈接文本後添加鏈接。

生成內(nèi)容的最後一個(gè)特例是插入計(jì)數(shù)器變量的值。我過去發(fā)現(xiàn)這對(duì)於對(duì)複雜的法律條款和條件列表進(jìn)行編號(hào)非常有用。

這裡有一系列標(biāo)題，下面有一系列嵌套列表。我希望每個(gè)章節(jié)標(biāo)題都有一個(gè)編號(hào)，每個(gè)列表項(xiàng)都作為每個(gè)章節(jié)的子項(xiàng)編號(hào)。

對(duì)於每個(gè)h2，我將遞增一個(gè)“section”計(jì)數(shù)器；對(duì)於每個(gè)列表項(xiàng)，我將遞增一個(gè)“item”計(jì)數(shù)器。在每個(gè)章節(jié)標(biāo)題之前，我將輸出章節(jié)計(jì)數(shù)器的值；在每個(gè)列表項(xiàng)之前，我將輸出項(xiàng)目計(jì)數(shù)器的值?？梢栽谟?jì)數(shù)器之間添加額外的字符串以創(chuàng)建複雜的編號(hào)系統(tǒng)。此方法的簡(jiǎn)化形式可用於控制列表中數(shù)字或項(xiàng)目符號(hào)的樣式。

a[href]:not([href*="#"]):after {
  content: attr(href);
}

形狀

由於頁面上的每個(gè)元素都可以有兩個(gè)“額外”元素，並且可以根據(jù)我們的喜好設(shè)置樣式，因此可以創(chuàng)建各種複雜的形狀。

在思考演示示例時(shí)，我看到了CSS-Tricks上形狀的參考；其中一個(gè)非常突出，我將逐步介紹其工作原理。讓我們用單個(gè)元素製作陰陽符號(hào)。

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

從方框開始，可以使用border-radius將其轉(zhuǎn)換為圓形?？梢允褂玫褥秷A形高度的border-bottom創(chuàng)建兩個(gè)彩色半圓形。兩個(gè)點(diǎn)是通過創(chuàng)建兩個(gè)帶有偽元素的圓圈並使用position:absolute放置它們來創(chuàng)建的。使用與半圓顏色匹配的邊框，可以創(chuàng)建符號(hào)的兩個(gè)圓形端點(diǎn)。如果您問我，這很酷。

我很喜歡使用偽元素；您可以用它們做很多事情，並向頁面添加各種視覺效果，而不會(huì)使標(biāo)記混亂。

關(guān)於CSS偽元素的常見問題

CSS偽元素有哪些不同類型？

CSS偽元素用於設(shè)置元素特定部分的樣式。有幾種類型的偽元素，包括::before、::after、::first-letter、::first-line、::selection、::backdrop和::placeholder。每個(gè)偽元素都針對(duì)元素的不同部分。例如，::before和::after用於在元素內(nèi)容前後插入內(nèi)容，而::first-letter和::first-line用於設(shè)置塊級(jí)元素的首字母或首行的樣式。

如何使用::before和::after偽元素？

::before和::after偽元素用於在元素內(nèi)容前後插入內(nèi)容。它們通常用於裝飾目的，例如添加圖標(biāo)或引號(hào)。要使用這些偽元素，需要指定content屬性。例如，要在段落前面添加心形圖標(biāo)，可以使用以下代碼：

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

我可以使用偽元素設(shè)置表單輸入的樣式嗎？

是的，您可以使用偽元素設(shè)置表單輸入的樣式。但是，並非所有表單輸入都可以使用偽元素設(shè)置樣式。例如，::placeholder偽元素可用於設(shè)置輸入字段的佔(zhàn)位符文本樣式。這是一個(gè)示例：

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

如何使用偽元素設(shè)置段落首字母的樣式？

您可以使用::first-letter偽元素設(shè)置塊級(jí)元素首字母的樣式。這通常用於創(chuàng)建首字母大寫效果。這是一個(gè)示例：

a[href]:not([href*="#"]):after {
  content: attr(href);
}

我可以在同一個(gè)元素上使用多個(gè)偽元素嗎？

是的，您可以在同一個(gè)元素上使用多個(gè)偽元素。例如，您可以在同一個(gè)元素上同時(shí)使用::before和::after來在其內(nèi)容前後插入內(nèi)容。但是，請(qǐng)記住偽元素的順序很重要。 ::before偽元素將始終插入在::after偽元素之前。

所有瀏覽器都支持偽元素嗎？

大多數(shù)現(xiàn)代瀏覽器都支持偽元素。但是，某些瀏覽器的舊版本可能不支持所有偽元素。在使用偽元素之前，最好檢查一下瀏覽器的兼容性。

偽元素和偽類有什麼區(qū)別？

偽元素和偽類都用於根據(jù)某些條件為元素應(yīng)用樣式。但是，它們用於不同的目的。偽類用於在元素處於特定狀態(tài)時(shí)設(shè)置其樣式，例如當(dāng)鼠標(biāo)懸停在其上或獲得焦點(diǎn)時(shí)。另一方面，偽元素用於設(shè)置元素特定部分的樣式。

我可以將偽元素與JavaScript一起使用嗎？

偽元素不是DOM的一部分，因此無法使用JavaScript直接訪問或操作它們。但是，您可以通過使用JavaScript更改父元素的樣式來更改應(yīng)用於偽元素的樣式。

如何使用::selection偽元素？

::selection偽元素用於更改用戶所選文本的外觀。例如，您可以更改所選文本的背景顏色和文本顏色。這是一個(gè)示例：

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

我可以為偽元素設(shè)置動(dòng)畫嗎？

是的，您可以使用CSS動(dòng)畫或過渡為偽元素設(shè)置動(dòng)畫。但是，請(qǐng)記住並非所有屬性都可以設(shè)置動(dòng)畫。例如，您可以為偽元素的不透明度或變換設(shè)置動(dòng)畫，但不能為content屬性設(shè)置動(dòng)畫。

以上是ATOZ CSS屏幕截圖：CSS偽元素的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！