偽元素與偽類兩者都是通過(guò)在選擇器后附加一個(gè)特定的關(guān)鍵字來(lái)定義，遵循相似的語(yǔ)法規(guī)則，并在 CSS 規(guī)則塊中設(shè)置相應(yīng)的樣式。偽元素 能夠通過(guò) content 屬性添加或替換內(nèi)容。例如，:before 和 :after 可以插入文本、圖像或其他生成的內(nèi)容。偽類 僅影響元素的樣式，而不添加或修改內(nèi)容。它們基于用戶的交互、文檔結(jié)構(gòu)或其他邏輯條件來(lái)改變?cè)氐谋憩F(xiàn)。主要區(qū)別如下：

作用對(duì)象：

• 偽類選擇器（Pseudo-classes）作用于實(shí)際存在的元素，用于描述元素的某種特定狀態(tài)或關(guān)系，如鏈接的訪問(wèn)狀態(tài)（:visited）、鼠標(biāo)懸停狀態(tài)（:hover）、是否為文檔中的第一個(gè)子元素（:first-child）等。它們不直接改變?cè)氐慕Y(jié)構(gòu)，而是影響元素在特定條件下的表現(xiàn)樣式。
• 偽元素選擇器（Pseudo-elements）則用于創(chuàng)建并選擇元素內(nèi)的某個(gè)特定部分或是在元素前后生成新的、虛擬的內(nèi)容節(jié)點(diǎn)。例如，:before 和 :after 可以用來(lái)插入額外內(nèi)容，:first-line 和 :first-letter 分別選擇元素首行文本和首字母，:marker 控制列表項(xiàng)標(biāo)記樣式等。這些偽元素并不對(duì)應(yīng)于HTML文檔中的實(shí)際元素，但可以對(duì)其應(yīng)用樣式，如同它們是真實(shí)存在的部分一樣。

語(yǔ)法標(biāo)識(shí)：

• 偽類 通常使用一個(gè)冒號(hào)（:）進(jìn)行標(biāo)識(shí)，如 :hover、:focus。
• 偽元素 在 CSS3 中使用兩個(gè)連續(xù)的冒號(hào)（::）進(jìn)行標(biāo)識(shí)，以區(qū)分于舊版 CSS 中的偽類。盡管大多數(shù)現(xiàn)代瀏覽器仍接受單冒號(hào)表示偽元素（如 :before），但為了符合 W3C 標(biāo)準(zhǔn)和保持最佳實(shí)踐，建議使用雙冒號(hào)形式，如 ::before、::after。

可復(fù)用性：

• 偽類 可以在同一選擇器中組合使用，如 a:hover:focus 表示同時(shí)處于懸停和聚焦?fàn)顟B(tài)的鏈接。
• 偽元素 由于代表了元素內(nèi)部的特定部分或生成的新內(nèi)容，一般不能在同一選擇器中重復(fù)出現(xiàn)。一個(gè)元素在同一時(shí)刻只能有一個(gè):before或:after偽元素生效。

一、CSS3 偽元素選擇器詳解與應(yīng)用實(shí)例

CSS3 偽元素是一種特殊的 CSS 選擇器，它們?cè)试S開(kāi)發(fā)者在不修改 HTML 結(jié)構(gòu)的前提下，通過(guò) CSS 為元素添加或修改特定部分的樣式，或者在元素內(nèi)部或外部生成并控制虛擬內(nèi)容。以下是對(duì)幾種常見(jiàn) CSS3 偽元素的詳解以及應(yīng)用實(shí)例：

1、:before 和 :after

:before 和 :after 偽元素分別在所選元素的內(nèi)容區(qū)域之后創(chuàng)建一個(gè)新的、無(wú)內(nèi)容的、不可見(jiàn)的“子元素”。然后，通過(guò)給這個(gè)偽元素設(shè)置樣式（如內(nèi)容、尺寸、顏色、背景等），使其變?yōu)榭梢?jiàn)，并在視覺(jué)上表現(xiàn)為緊隨原元素內(nèi)容之后的部分。這些內(nèi)容由 content 屬性定義，并且可以應(yīng)用其他樣式。

語(yǔ)法：

selector:before {
  content: "..." /* 或其他值 */;
  /* 其他樣式聲明 */
}
selector:after {
  content: "..." /* 或其他值 */;
  /* 其他樣式聲明 */
}

其中，content 屬性是定義偽元素生成內(nèi)容的關(guān)鍵。它可以接受以下幾種值：

• 字符串：直接指定要顯示的文字。
• 引號(hào)包圍的HTML實(shí)體：如 content: "—";（破折號(hào)）。
• URL：插入圖片資源，如 content: url(image.png);。
• 生成內(nèi)容關(guān)鍵字：如 content: counter(name);（計(jì)數(shù)器）或 content: attr(attribute-name);（獲取元素屬性值）。

應(yīng)用實(shí)例：

1.1. 添加裝飾性內(nèi)容

添加引號(hào)、圖標(biāo)或其他裝飾性元素。

添加引號(hào)：

blockquote:before {
  content: open-quote;
  font-size: larger;
  color: #666;
}
blockquote:after {
  content: close-quote;
}

在列表項(xiàng)前/后添加自定義圖標(biāo)：

li:before {
  content: url(icon-checkmark.svg);
  margin-right: 0.5em;
}
li.completed:after {
  content: "\2713"; /* Unicode 字符：對(duì)勾 */
  color: green;
  font-size: 1.5em;
  vertical-align: super;
}

1.2. 清除浮動(dòng)

:after 常用于創(chuàng)建一個(gè)空的塊級(jí)元素，配合 clear:both 來(lái)清除浮動(dòng)對(duì)后續(xù)元素的影響，避免“高度塌陷”問(wèn)題。

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

將 .clearfix 類應(yīng)用于需要清除內(nèi)部浮動(dòng)的容器元素。

1.3. 替代或擴(kuò)展HTML內(nèi)容

利用 attr() 函數(shù)，可以從元素的屬性中提取值作為 :after 的內(nèi)容，實(shí)現(xiàn)動(dòng)態(tài)文本展示。

abbr[title]:after {
  content: " (" attr(title) ")";
  font-size: smaller;
  color: gray;
}

此例中，當(dāng)鼠標(biāo)懸停在帶有 title 屬性的 abbr 元素上時(shí)，會(huì)顯示一個(gè)包含 title 屬性值的小字號(hào)灰色括注內(nèi)容。

1.4. 實(shí)現(xiàn)復(fù)雜形狀與動(dòng)畫

結(jié)合 content、background、border 等屬性以及CSS3的 transform、transition 或 animation，可以使用 :after 創(chuàng)建復(fù)雜的形狀和動(dòng)畫效果。

.button:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: ?em solid transparent;
  border-right: ?em solid transparent;
  border-bottom: ?em solid #007BFF;
  border-left: ?em solid transparent;
  margin-left: 0.?em;
}
.button:hover:after {
  transform: translateY(-0.1em);
  transition: transform 0.2s ease-in-out;
}

上述代碼在.button元素后創(chuàng)建了一個(gè)三角形下拉箭頭，并在鼠標(biāo)懸停時(shí)實(shí)現(xiàn)平滑的下移動(dòng)畫。

注意事項(xiàng)

• :after 偽元素必須與 content 屬性一起使用，否則不會(huì)產(chǎn)生任何效果。
• 由于 :after 是創(chuàng)建的虛擬元素，無(wú)法通過(guò)JavaScript進(jìn)行DOM操作。
• 雖然 :after 生成的內(nèi)容可以參與布局，但它不計(jì)入DOM，不影響語(yǔ)義，也不影響鍵盤導(dǎo)航等輔助功能。

總結(jié)而言，CSS3 偽元素選擇器通過(guò)在元素內(nèi)容后插入自定義內(nèi)容，極大地豐富了網(wǎng)頁(yè)設(shè)計(jì)的表現(xiàn)力，且無(wú)需改動(dòng)HTML結(jié)構(gòu)。熟練運(yùn)用偽元素與其他CSS技巧，可以幫助開(kāi)發(fā)者構(gòu)建更加美觀、響應(yīng)迅速且易于維護(hù)的網(wǎng)頁(yè)界面。

2、:first-line 和 :first-letter

:first-line 偽元素選擇器用于設(shè)置元素內(nèi)首行文本的樣式，而 :first-letter 偽元素則用于設(shè)置元素內(nèi)首字母的樣式。

語(yǔ)法：

selector:first-line {
  /* 樣式聲明 */
}
selector:first-letter {
  /* 樣式聲明 */
}

應(yīng)用實(shí)例：

首行縮進(jìn)：

article p:first-line {
  text-indent: 2em;
}

首字母大寫與裝飾：

article h2:first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.5em;
  line-height: 0.8;
  color: #8A2BE2;
  background-color: #F8F8FF;
  padding: 0.?em 0.?em;
  border-radius: 0.5em;
}

二、CSS3 偽類選擇器詳解與實(shí)踐示例

CSS3 偽類選擇器是一種強(qiáng)大的工具，它允許開(kāi)發(fā)者基于元素狀態(tài)而非其在文檔樹中的位置或類、ID等固有屬性來(lái)精確地定位并施加樣式。這些選擇器以特殊的語(yǔ)法結(jié)構(gòu)描述元素的不同條件狀態(tài)，如用戶交互、位置關(guān)系、內(nèi)容特性等，從而實(shí)現(xiàn)動(dòng)態(tài)、響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)。以下是CSS3偽類選擇器的詳細(xì)解釋及其實(shí)際應(yīng)用示例。

1、靜態(tài)偽類選擇器

:link與:visited

:link: 用于選擇尚未被用戶訪問(wèn)過(guò)的超鏈接（<a>元素）。通常用于設(shè)置未訪問(wèn)鏈接的基本樣式。

a:link {
  color: blue;
  text-decoration: none;
}

:visited: 選擇用戶已經(jīng)訪問(wèn)過(guò)的鏈接。用于設(shè)置已訪問(wèn)鏈接的區(qū)分樣式。

a:visited {
  color: purple;
}

2、用戶交互偽類選擇器 :hover, :focus, :active

:hover: 當(dāng)鼠標(biāo)指針懸浮在元素上時(shí)，匹配該元素。

button:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

:focus: 選擇獲得焦點(diǎn)的元素，常見(jiàn)于表單控件或可聚焦元素（如<input>, <textarea>, <button>等）。

input:focus {
  outline: 2px solid #007BFF;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

:active: 用于表示用戶正在激活或按下某個(gè)元素（通常在鼠標(biāo)點(diǎn)擊或觸摸屏上按壓時(shí)）。

a:active {
  color: red;
  font-weight: bold;
}

3、結(jié)構(gòu)化偽類選擇器 :first-child, :last-child, :only-child, :nth-child(n)等

:first-child: 選擇作為其父元素第一個(gè)子元素的元素。

li:first-child {
  list-style-type: square;
}

:last-child: 選擇作為其父元素最后一個(gè)子元素的元素。

div > p:last-child {
  margin-bottom: 0;
}

:only-child: 選擇沒(méi)有兄弟元素的元素。

.message:only-child {
  border-width: 2px;
}

:nth-child(n): 選擇其父元素的第n個(gè)子元素，其中n可以是數(shù)字、關(guān)鍵詞（even, odd）或公式（如2n+1）。

li:nth-child(2n) {
  background-color: #f9f9f9;
}

4、內(nèi)容相關(guān)偽類選擇器

:empty, :target, :enabled, :disabled, :checked等

:empty: 選擇沒(méi)有任何內(nèi)容（包括子元素、文本節(jié)點(diǎn)等）的元素。

div.empty:empty {
  display: none;
}

:target: 選擇當(dāng)前URL片段標(biāo)識(shí)符（hash）與該元素ID相匹配的元素。

#content:target {
  background-color: lightyellow;
}

:enabled與:disabled: 分別選擇啟用狀態(tài)與禁用狀態(tài)的表單元素。

input:enabled {
  background-color: white;
}
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

:checked: 用于復(fù)選框（<input type="checkbox">）、單選按鈕（<input type="radio">）或<option>元素處于選中狀態(tài)時(shí)。

input[type="checkbox"]:checked + label {
  text-decoration: line-through;
}

5、否定偽類選擇器

:not(selector)

:not(): 選擇不符合括號(hào)內(nèi)指定選擇器的元素。

/* 除了class為"exclude"的所有段落 */
p:not(.exclude) {
  color: green;
}

6、其他偽類選擇器

:root, :nth-of-type(n), :nth-last-of-type(n), :first-of-type, :last-of-type, :only-of-type等

:root: 選擇文檔的根元素（HTML文檔中通常是<html>元素）。

:root {
  --primary-color: #3498db;
}

:nth-of-type(n)與:nth-last-of-type(n): 類似于:nth-child(n)，但僅針對(duì)同級(jí)元素中特定類型的子元素。

article:nth-of-type(even) {
  background-color: #f5f5f5;
}

:first-of-type, :last-of-type與:only-of-type: 分別選擇同級(jí)元素中第一個(gè)、最后一個(gè)或唯一一個(gè)特定類型的子元素。

div > p:first-of-type {
  font-weight: bold;
}

通過(guò)熟練掌握以上CSS3偽類選擇器及其應(yīng)用場(chǎng)景，開(kāi)發(fā)者能夠編寫出更高效、更具表現(xiàn)力和交互性的CSS代碼，提升網(wǎng)站的用戶體驗(yàn)和視覺(jué)效果。隨著CSS標(biāo)準(zhǔn)的不斷演進(jìn)，還可能有更多新的偽類選擇器加入到CSS3的行列中，為前端開(kāi)發(fā)提供更為豐富和精細(xì)的控制手段。

無(wú)論是偽類還是偽元素，都是為了增強(qiáng) CSS 選擇器的功能，使開(kāi)發(fā)者能夠在不改動(dòng) HTML 結(jié)構(gòu)的情況下，更精細(xì)地控制元素的樣式和布局。

到此這篇關(guān)于CSS3 偽元素與偽類選擇器區(qū)別、詳解與應(yīng)用實(shí)例的文章就介紹到這了,更多相關(guān)CSS3 偽元素與偽類選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論