秘HTML標(biāo)簽中的偽元素與偽類：

它們的區(qū)別及應(yīng)用場(chǎng)景深度解析

一、引言：揭開偽元素與偽類的神秘面紗

在Web前端開發(fā)的世界中，HTML作為網(wǎng)頁內(nèi)容的基礎(chǔ)語言，其標(biāo)簽元素的運(yùn)用對(duì)于頁面構(gòu)建至關(guān)重要。然而，HTML標(biāo)簽的功能并非僅限于直觀呈現(xiàn)的元素本身，還存在著一種特殊的擴(kuò)展手段——偽元素與偽類。它們?nèi)缤琀TML標(biāo)簽的魔法附魔，賦予原本靜態(tài)的元素動(dòng)態(tài)行為與視覺效果，極大地豐富了網(wǎng)頁設(shè)計(jì)的可能性。本文將深度解析偽元素與偽類的概念、區(qū)別以及在實(shí)際項(xiàng)目中的應(yīng)用場(chǎng)景，輔以具體代碼示例，幫助您全面掌握這一強(qiáng)大工具。

二、基礎(chǔ)概念：偽元素與偽類的定義

1. 偽元素

**定義：** 偽元素是一種虛擬的HTML元素，它不存在于文檔樹中，但可以通過CSS樣式來創(chuàng)建和控制其外觀與行為。它們被用于插入額外的文本或生成新的可視化內(nèi)容，通常以雙冒號(hào)`::`進(jìn)行標(biāo)識(shí)。

舉例：

css
p::before {
  content: "【注】";
  color: red;
}

上述代碼中，我們?yōu)閌<p>`元素添加了一個(gè)`::before`偽元素，它會(huì)在每個(gè)段落開頭插入文本“【注】”，并賦予紅色字體顏色。這種技術(shù)常用于添加裝飾性元素、注釋標(biāo)記等。

2. 偽類

**定義：** 偽類是一種特殊的狀態(tài)或條件，用于描述HTML元素在特定時(shí)刻或滿足某種邏輯條件時(shí)的樣式。它們通過單冒號(hào)`:`進(jìn)行標(biāo)識(shí)，作用于已存在于文檔樹中的真實(shí)元素上，無需改變DOM結(jié)構(gòu)即可實(shí)現(xiàn)狀態(tài)切換。

舉例：

css
a:hover {
  color: blue;
  text-decoration: underline;
}

在這個(gè)例子中，我們?yōu)閌<a>`元素定義了`:hover`偽類，當(dāng)用戶鼠標(biāo)懸停在鏈接上時(shí)，鏈接文字變?yōu)樗{(lán)色并顯示下劃線，實(shí)現(xiàn)了交互式反饋。

三、核心差異：偽元素與偽類的區(qū)別

1. 存在形式

- **偽元素**：創(chuàng)建了實(shí)際不存在于HTML源碼中的新內(nèi)容，如生成文本、圖形等。

- **偽類**：基于已有元素的不同狀態(tài)（如鼠標(biāo)懸停、訪問歷史等）改變其樣式，不生成新內(nèi)容。

2. 應(yīng)用場(chǎng)景

- **偽元素**：主要用于添加裝飾性元素、生成內(nèi)容提示、分隔符、引用符號(hào)等，增強(qiáng)內(nèi)容的可讀性和美觀度。

- **偽類**：廣泛應(yīng)用于交互反饋、導(dǎo)航菜單高亮、表單驗(yàn)證狀態(tài)、列表項(xiàng)計(jì)數(shù)等，實(shí)現(xiàn)動(dòng)態(tài)樣式變化。

3. 選擇器標(biāo)識(shí)

- **偽元素**：使用雙冒號(hào)`::`進(jìn)行標(biāo)識(shí)，如`::before`、`::after`、`::first-letter`、`::first-line`等。

- **偽類**：使用單冒號(hào)`:`進(jìn)行標(biāo)識(shí)，如`:hover`、`:active`、`:focus`、`:visited`、`:nth-child()`等。

四、應(yīng)用場(chǎng)景深度解析

1. 偽元素的應(yīng)用

(a) 內(nèi)容修飾與補(bǔ)充

css
blockquote::before,
blockquote::after {
  content: '"';
  font-size: 2em;
  line-height: 0.8;
  color: #999;
  vertical-align: middle;
}

blockquote::before {
  margin-right: 0.5em;
}

blockquote::after {
  margin-left: 0.5em;
}

上述代碼使用`::before`和`::after`偽元素為`<blockquote>`元素兩側(cè)添加引號(hào)，增強(qiáng)了內(nèi)容的識(shí)別度。

(b) 清除浮動(dòng)與分隔符

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

ul.list > li + li::before {
  content: "? ";
  color: #ccc;
}

第一個(gè)例子中，`.clearfix::after`創(chuàng)建一個(gè)空內(nèi)容塊級(jí)元素，清除父元素內(nèi)部浮動(dòng)元素的影響。第二個(gè)例子則在無序列表相鄰`<li>`元素間插入點(diǎn)狀符號(hào)作為分隔符。

2. 偽類的應(yīng)用

(a) 交互反饋

css
.nav-item:hover {
  background-color: #f5f5f5;
}

.nav-item:active {
  background-color: #e0e0e0;
}

上述代碼分別定義了`.nav-item`元素在鼠標(biāo)懸停和激活（點(diǎn)擊）時(shí)的背景色變化，提升了導(dǎo)航菜單的用戶體驗(yàn)。

(b) 表單驗(yàn)證狀態(tài)

css
input:required::before {
  content: "*";
  color: red;
  margin-right: 0.5em;
}

input:invalid {
  border-color: red;
}

第一個(gè)規(guī)則為必填輸入框前添加紅色星號(hào)提示；第二個(gè)規(guī)則在輸入無效時(shí)改變輸入框邊框顏色，直觀反映表單驗(yàn)證狀態(tài)。

(c) 列表項(xiàng)計(jì)數(shù)與樣式

css
ol li {
  counter-increment: list-item;
}

ol li::before {
  content: counter(list-item)". ";
}

ul.list > li:nth-child(odd) {
  background-color: #f9f9f9;
}

第一部分使用`counter-increment`和`::before`為有序列表自動(dòng)添加序號(hào)；第二部分則為無序列表奇數(shù)項(xiàng)設(shè)置淺灰色背景，實(shí)現(xiàn)交替行效果。

五、結(jié)論：善用偽元素與偽類，提升前端設(shè)計(jì)與交互層次

偽元素與偽類作為CSS的強(qiáng)大武器，能讓我們?cè)诓恍薷腍TML結(jié)構(gòu)的前提下，靈活地為網(wǎng)頁添加豐富的視覺效果與交互反饋。理解兩者的核心差異，并熟練掌握各自的應(yīng)用場(chǎng)景，是每位前端開發(fā)者進(jìn)階之路的必備技能。希望本文對(duì)您深入理解與運(yùn)用偽元素與偽類有所助益，助力您的Web項(xiàng)目更具表現(xiàn)力與用戶體驗(yàn)。

<ul>
 <li>我是第一個(gè)</li>
 <li>我是第二個(gè)</li>
</ul>

<p>Hello World, and wish you have a good day!</p>

們先來看個(gè)例子：

在這個(gè)網(wǎng)頁中，同時(shí)在一個(gè)頁面中展示了三個(gè)網(wǎng)站：千鋒教育官網(wǎng)、千鋒教育HTML5大前端官網(wǎng)、千鋒教育HTML5大前端好程序員官網(wǎng)。這是如何做到的呢？

其實(shí)也不難，使用 iframe 就可以實(shí)現(xiàn)了。 iframe的作用 是，用來在一個(gè)網(wǎng)頁中顯示另一個(gè)網(wǎng)頁。

iframe 是個(gè)雙標(biāo)簽，基本語法為：尖角號(hào)iframe，尖角號(hào) /iframe。

iframe 標(biāo)簽有五個(gè)基本屬性：

src 屬性，資源的意思，用以引入其他網(wǎng)站的頁面，值是一個(gè)頁面路徑。

width 屬性，寬度的意思，用以控制引入頁面的寬度，值是一個(gè)數(shù)字。

height 屬性，高度的意思，用以控制引入頁面的高度，值是一個(gè)數(shù)字。

frameborder 屬性，框架邊框的意思，默認(rèn)引入的框架帶有邊框，通常情況下將該屬性值設(shè)置為0，來取消框架的邊框。

scrolling[?skr??l??] 屬性，滾動(dòng)的意思，用來控制是否顯示框架的滾動(dòng)條，值有三個(gè)：

auto，在需要的情況下出現(xiàn)滾動(dòng)條，也是默認(rèn)值。

yes，始終顯示滾動(dòng)條。

no，從不顯示滾動(dòng)條。

我們來做個(gè)例子。

打開編輯器，新建一個(gè) iframe-demo.html 文件，補(bǔ)全基礎(chǔ)代碼，在 body 里添加 iframe 標(biāo)簽，首先定義 src 屬性，值為 http://www.qfedu.com，frameborder 屬性的值設(shè)置為1，顯示邊框。保存頁面。

在瀏覽器中打開頁面。千鋒教育的官網(wǎng)在 iframe 的默認(rèn)大小的窗口里顯示了。

返回編輯器，給 iframe 定義屬性 width 等 800，height 等于 600，保存。

回到瀏覽器，刷新，iframe 的窗口變大了。可以通過滾動(dòng)條查看網(wǎng)站內(nèi)容。

返回編輯器，如果給iframe 定義一個(gè)scrolling 屬性，值為 no 的話，滾動(dòng)條就不見了。

回到瀏覽器，刷新。此時(shí)就不能查看窗口隱藏的內(nèi)容了。

iframe 也可以作為一個(gè)鏈接的目標(biāo)框架。鏈接的 target 屬性必須設(shè)置為 iframe 的 name 屬性。

比如給 iframe 定義 name 屬性的值為 iframe_a，鏈接 a 的 target 屬性值也設(shè)置為 iframe_a。這樣，當(dāng)點(diǎn)擊鏈接時(shí)，千鋒教育的官網(wǎng)就在這個(gè) iframe 窗口里打開了。

<iframe name="iframe_a">

<a href="http://www.qfedu.com/" target="iframe_a">千鋒教育</a>

我們?cè)賮砜磦€(gè)例子，當(dāng)點(diǎn)擊三個(gè)鏈接，iframe 里顯示了相應(yīng)鏈接的網(wǎng)站。

我們來實(shí)現(xiàn)這個(gè)例子。

回到編輯器，創(chuàng)建一個(gè) iframe-example.html 文件，補(bǔ)全基本代碼，在 body 里添加一個(gè) div 容器，在容器里添加一個(gè) iframe，定義屬性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。

在瀏覽器中打開頁面，一個(gè) iframe 框架做好了。

回到編輯器，在 body 里的第一行再添加一個(gè) div 容器，在容器里書寫 emmet 命令：a 中括號(hào) href 空格 target 等于 iframe_a 大于號(hào) b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 鍵自動(dòng)補(bǔ)全代碼。很明顯，這不是我們要的代碼。

這怎么辦呢？聰明的你一定想到了，在小學(xué)數(shù)學(xué)里，通過添加小括號(hào)來設(shè)置運(yùn)算優(yōu)先級(jí)的法則。

我們?cè)?a 的前面，b 的后面填上一對(duì)括號(hào)， (a[href target=iframe_a]>b)*3 我們把這個(gè) emmet 放到注釋里保存一下。

將光標(biāo)移至 emmet 語句的結(jié)尾，按下 tab。期望的代碼生成了。

如果你是完美主義者，這個(gè)代碼你也不滿意，能不能換行顯示三個(gè) a 標(biāo)簽?zāi)兀看蠹腋乙黄鹱觯?/span>

點(diǎn)擊 VSCode 左下角的齒輪圖標(biāo)，再點(diǎn)擊設(shè)置，打開設(shè)置窗口。

點(diǎn)擊擴(kuò)展菜單，再點(diǎn)擊 emmet，找到 Syntax(森太課思) Profiles，在 settings（賽ten 思）.json 中編輯。

在這里輸入 html 冒號(hào) 大括號(hào)，在大括號(hào)里寫入 inline_break 冒號(hào) 2，表示標(biāo)簽數(shù)大于 兩 組，就折行顯示。

"html": {

"inline_break": 2

},

關(guān)閉設(shè)置。

把剛才保存的 emmet 命令再拷貝過來，按下 tab 鍵，完美的代碼生成了！

給三個(gè)a 標(biāo)簽填好鏈接地址和文本內(nèi)容。

這里需要注意，a 鏈接的地址可以是互聯(lián)網(wǎng)的網(wǎng)站地址，也可以是你自己制作的本地頁面地址，這些頁面都可以在 iframe 中顯示。

我們發(fā)現(xiàn)三個(gè)鏈接的target屬性都指向了同一個(gè)iframe。保存一下頁面。

回到瀏覽器，刷新。分別點(diǎn)擊三個(gè)鏈接，iframe 里分別顯示了三個(gè)網(wǎng)站的頁面。

文章配套視頻鏈接「鏈接」