&quot;揭秘HTML標簽中的偽元素與偽類：它們的區(qū)別及應(yīng)用場景深

秘HTML標簽中的偽元素與偽類：

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

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

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

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

1. 偽元素

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

舉例：

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

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

2. 偽類

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

舉例：

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

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

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

1. 存在形式

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

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

2. 應(yīng)用場景

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

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

3. 選擇器標識

- **偽元素**：使用雙冒號`::`進行標識，如`::before`、`::after`、`::first-letter`、`::first-line`等。

- **偽類**：使用單冒號`:`進行標識，如`:hover`、`:active`、`:focus`、`:visited`、`:nth-child()`等。

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

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

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

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è)添加引號，增強了內(nèi)容的識別度。

(b) 清除浮動與分隔符

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

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

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

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

(a) 交互反饋

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

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

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

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

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

input:invalid {
  border-color: red;
}

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

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`為有序列表自動添加序號；第二部分則為無序列表奇數(shù)項設(shè)置淺灰色背景，實現(xiàn)交替行效果。

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

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

擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

前言

熟悉前端的人都會聽過css的偽類與偽元素，然而大多數(shù)的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發(fā)，區(qū)分這兩者的區(qū)別，即使你有用過偽類與偽元素，但里面總有一兩個你沒見過的吧。

偽類與偽元素

先說一說為什么css要引入偽元素和偽類，以下是w3c的描述：

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

直譯過來就是：css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。下面分別對偽類和偽元素進行解釋。

偽類用于當已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態(tài)。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。

偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。

偽類與偽元素的區(qū)別

這里通過兩個例子來說明兩者的區(qū)別。

下面是一個簡單的html列表片段：

<ul>
 <li>我是第一個</li>
 <li>我是第二個</li>
</ul>

如果想要給第一項添加樣式，可以在為第一個<li>添加一個類，并在該類中定義對應(yīng)樣式：

如果不用添加類的方法，我們可以通過給設(shè)置第一個<li>的:first-child偽類來為其添加樣式。這個時候，被修飾的<li>元素依然處于文檔樹中。

下面是另一個簡單的html段落片段：

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

如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，并設(shè)置該span元素的樣式：

如果不創(chuàng)建一個元素，我們可以通過設(shè)置的:first-letter偽元素來為其添加樣式。這個時候，看起來好像是創(chuàng)建了一個虛擬的元素并添加了樣式，但實際上文檔樹中并不存在這個元素。

從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個文檔樹之外的元素。

偽元素是使用單冒號還是雙冒號

CSS3規(guī)范中的要求使用雙冒號(::)表示偽元素，以此來區(qū)分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。

然而，除了少部分偽元素，如::backdrop必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after也可以正確運行。

對于偽元素是使用單冒號還是雙冒號的問題，w3c標準中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是：雖然CSS3標準要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。

實際上，偽元素使用單冒號還是雙冒號很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。

偽類與偽元素的具體用法

這一章以含義解析和例子的方式列出大部分的偽類和偽元素的具體用法。下面是根據(jù)用途分類的偽類總結(jié)圖和根據(jù)冒號分類的偽元素總結(jié)圖：

某些偽類或偽元素仍然處于試驗階段，在使用前建議先在Can I Use等網(wǎng)站查一查其瀏覽器兼容性。處于試驗階段的偽類或偽元素會在標題中標注。

想了解更多CSS選擇器，請點擊：CSS選擇器如此之多，你了解多少？

公告

喜歡小編的點擊關(guān)注，了解更多知識！

們先來看個例子：

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

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

iframe 是個雙標簽，基本語法為：尖角號iframe，尖角號 /iframe。

iframe 標簽有五個基本屬性：

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

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

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

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

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

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

yes，始終顯示滾動條。

no，從不顯示滾動條。

我們來做個例子。

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

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

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

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

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

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

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

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

我們再來看個例子，當點擊三個鏈接，iframe 里顯示了相應(yīng)鏈接的網(wǎng)站。

我們來實現(xiàn)這個例子。

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

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

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

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

我們在 a 的前面，b 的后面填上一對括號， (a[href target=iframe_a]>b)*3 我們把這個 emmet 放到注釋里保存一下。

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

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

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

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

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

"html": {

"inline_break": 2

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

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

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

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

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

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

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

在線咨詢

上一篇：用js實現(xiàn)html頁面水印
下一篇：ASP.NET實現(xiàn)大視頻上傳

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

&amp;quot;揭秘HTML標簽中的偽元素與偽類：它們的區(qū)別及應(yīng)用場景深