整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
秘HTML標(biāo)簽中的偽元素與偽類(lèi)：
它們的區(qū)別及應(yīng)用場(chǎng)景深度解析
在Web前端開(kāi)發(fā)的世界中，HTML作為網(wǎng)頁(yè)內(nèi)容的基礎(chǔ)語(yǔ)言，其標(biāo)簽元素的運(yùn)用對(duì)于頁(yè)面構(gòu)建至關(guān)重要。然而，HTML標(biāo)簽的功能并非僅限于直觀呈現(xiàn)的元素本身，還存在著一種特殊的擴(kuò)展手段——偽元素與偽類(lèi)。它們?nèi)缤琀TML標(biāo)簽的魔法附魔，賦予原本靜態(tài)的元素動(dòng)態(tài)行為與視覺(jué)效果，極大地豐富了網(wǎng)頁(yè)設(shè)計(jì)的可能性。本文將深度解析偽元素與偽類(lèi)的概念、區(qū)別以及在實(shí)際項(xiàng)目中的應(yīng)用場(chǎng)景，輔以具體代碼示例，幫助您全面掌握這一強(qiáng)大工具。
1. 偽元素
**定義：** 偽元素是一種虛擬的HTML元素，它不存在于文檔樹(shù)中，但可以通過(guò)CSS樣式來(lái)創(chuàng)建和控制其外觀與行為。它們被用于插入額外的文本或生成新的可視化內(nèi)容，通常以雙冒號(hào)`::`進(jìn)行標(biāo)識(shí)。
舉例：
css
p::before {
content: "【注】";
color: red;
}
上述代碼中，我們?yōu)閌<p>`元素添加了一個(gè)`::before`偽元素，它會(huì)在每個(gè)段落開(kāi)頭插入文本“【注】”，并賦予紅色字體顏色。這種技術(shù)常用于添加裝飾性元素、注釋標(biāo)記等。
2. 偽類(lèi)
**定義：** 偽類(lèi)是一種特殊的狀態(tài)或條件，用于描述HTML元素在特定時(shí)刻或滿足某種邏輯條件時(shí)的樣式。它們通過(guò)單冒號(hào)`:`進(jìn)行標(biāo)識(shí)，作用于已存在于文檔樹(shù)中的真實(shí)元素上，無(wú)需改變DOM結(jié)構(gòu)即可實(shí)現(xiàn)狀態(tài)切換。
舉例：
css
a:hover {
color: blue;
text-decoration: underline;
}
在這個(gè)例子中，我們?yōu)閌<a>`元素定義了`:hover`偽類(lèi)，當(dāng)用戶鼠標(biāo)懸停在鏈接上時(shí)，鏈接文字變?yōu)樗{(lán)色并顯示下劃線，實(shí)現(xiàn)了交互式反饋。
1. 存在形式
- **偽元素**：創(chuàng)建了實(shí)際不存在于HTML源碼中的新內(nèi)容，如生成文本、圖形等。
- **偽類(lèi)**：基于已有元素的不同狀態(tài)（如鼠標(biāo)懸停、訪問(wèn)歷史等）改變其樣式，不生成新內(nèi)容。
2. 應(yīng)用場(chǎng)景
- **偽元素**：主要用于添加裝飾性元素、生成內(nèi)容提示、分隔符、引用符號(hào)等，增強(qiáng)內(nèi)容的可讀性和美觀度。
- **偽類(lè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`等。
- **偽類(lèi)**：使用單冒號(hào)`:`進(jìn)行標(biāo)識(shí)，如`:hover`、`:active`、`:focus`、`:visited`、`:nth-child()`等。
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è)例子則在無(wú)序列表相鄰`<li>`元素間插入點(diǎn)狀符號(hào)作為分隔符。
2. 偽類(lèi)的應(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ī)則在輸入無(wú)效時(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)；第二部分則為無(wú)序列表奇數(shù)項(xiàng)設(shè)置淺灰色背景，實(shí)現(xiàn)交替行效果。
偽元素與偽類(lèi)作為CSS的強(qiáng)大武器，能讓我們?cè)诓恍薷腍TML結(jié)構(gòu)的前提下，靈活地為網(wǎng)頁(yè)添加豐富的視覺(jué)效果與交互反饋。理解兩者的核心差異，并熟練掌握各自的應(yīng)用場(chǎng)景，是每位前端開(kāi)發(fā)者進(jìn)階之路的必備技能。希望本文對(duì)您深入理解與運(yùn)用偽元素與偽類(lèi)有所助益，助力您的Web項(xiàng)目更具表現(xiàn)力與用戶體驗(yàn)。
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)
熟悉前端的人都會(huì)聽(tīng)過(guò)css的偽類(lèi)與偽元素，然而大多數(shù)的人都會(huì)將這兩者混淆。本文從解析偽類(lèi)與偽元素的含義出發(fā)，區(qū)分這兩者的區(qū)別，即使你有用過(guò)偽類(lèi)與偽元素，但里面總有一兩個(gè)你沒(méi)見(jiàn)過(guò)的吧。
先說(shuō)一說(shuō)為什么css要引入偽元素和偽類(lèi)，以下是w3c的描述：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
直譯過(guò)來(lái)就是：css引入偽類(lèi)和偽元素概念是為了格式化文檔樹(shù)以外的信息。也就是說(shuō)，偽類(lèi)和偽元素是用來(lái)修飾不在文檔樹(shù)中的部分，比如，一句話中的第一個(gè)字母，或者是列表中的第一個(gè)元素。下面分別對(duì)偽類(lèi)和偽元素進(jìn)行解釋。
偽類(lèi)用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。比如說(shuō)，當(dāng)用戶懸停在指定的元素時(shí)，我們可以通過(guò):hover來(lái)描述這個(gè)元素的狀態(tài)。雖然它和普通的css類(lèi)相似，可以為已有的元素添加樣式，但是它只有處于dom樹(shù)無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以將其稱(chēng)為偽類(lèi)。
偽元素用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式。比如說(shuō)，我們可以通過(guò):before來(lái)在一個(gè)元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹(shù)中。
這里通過(guò)兩個(gè)例子來(lái)說(shuō)明兩者的區(qū)別。
下面是一個(gè)簡(jiǎn)單的html列表片段：
<ul> <li>我是第一個(gè)</li> <li>我是第二個(gè)</li> </ul>
如果想要給第一項(xiàng)添加樣式，可以在為第一個(gè)<li>添加一個(gè)類(lèi)，并在該類(lèi)中定義對(duì)應(yīng)樣式：
如果不用添加類(lèi)的方法，我們可以通過(guò)給設(shè)置第一個(gè)<li>的:first-child偽類(lèi)來(lái)為其添加樣式。這個(gè)時(shí)候，被修飾的<li>元素依然處于文檔樹(shù)中。
下面是另一個(gè)簡(jiǎn)單的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要給該段落的第一個(gè)字母添加樣式，可以在第一個(gè)字母中包裹一個(gè)元素，并設(shè)置該span元素的樣式：
如果不創(chuàng)建一個(gè)<span>元素，我們可以通過(guò)設(shè)置<p>的:first-letter偽元素來(lái)為其添加樣式。這個(gè)時(shí)候，看起來(lái)好像是創(chuàng)建了一個(gè)虛擬的<span>元素并添加了樣式，但實(shí)際上文檔樹(shù)中并不存在這個(gè)<span>元素。
從上述例子中可以看出，偽類(lèi)的操作對(duì)象是文檔樹(shù)中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素。因此，偽類(lèi)與偽元素的區(qū)別在于：有沒(méi)有創(chuàng)建一個(gè)文檔樹(shù)之外的元素。
CSS3規(guī)范中的要求使用雙冒號(hào)(::)表示偽元素，以此來(lái)區(qū)分偽元素和偽類(lèi)，比如::before和::after等偽元素使用雙冒號(hào)(::)，:hover和:active等偽類(lèi)使用單冒號(hào)(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(hào)(::)表示方法。
然而，除了少部分偽元素，如::backdrop必須使用雙冒號(hào)，大部分偽元素都支持單冒號(hào)和雙冒號(hào)的寫(xiě)法，比如::after，寫(xiě)成:after也可以正確運(yùn)行。
對(duì)于偽元素是使用單冒號(hào)還是雙冒號(hào)的問(wèn)題，w3c標(biāo)準(zhǔn)中的描述如下：
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標(biāo)準(zhǔn)要求偽元素使用雙冒號(hào)的寫(xiě)法，但也依然支持單冒號(hào)的寫(xiě)法。為了向后兼容，我們建議你在目前還是使用單冒號(hào)的寫(xiě)法。
實(shí)際上，偽元素使用單冒號(hào)還是雙冒號(hào)很難說(shuō)得清誰(shuí)對(duì)誰(shuí)錯(cuò)，你可以按照個(gè)人的喜好來(lái)選擇某一種寫(xiě)法。
這一章以含義解析和例子的方式列出大部分的偽類(lèi)和偽元素的具體用法。下面是根據(jù)用途分類(lèi)的偽類(lèi)總結(jié)圖和根據(jù)冒號(hào)分類(lèi)的偽元素總結(jié)圖：
某些偽類(lèi)或偽元素仍然處于試驗(yàn)階段，在使用前建議先在Can I Use等網(wǎng)站查一查其瀏覽器兼容性。處于試驗(yàn)階段的偽類(lèi)或偽元素會(huì)在標(biāo)題中標(biāo)注。
想了解更多CSS選擇器，請(qǐng)點(diǎn)擊：CSS選擇器如此之多，你了解多少？
喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！
們先來(lái)看個(gè)例子：
在這個(gè)網(wǎng)頁(yè)中，同時(shí)在一個(gè)頁(yè)面中展示了三個(gè)網(wǎng)站：千鋒教育官網(wǎng)、千鋒教育HTML5大前端官網(wǎng)、千鋒教育HTML5大前端好程序員官網(wǎng)。這是如何做到的呢？
其實(shí)也不難，使用 iframe 就可以實(shí)現(xiàn)了。 iframe的作用 是，用來(lái)在一個(gè)網(wǎng)頁(yè)中顯示另一個(gè)網(wǎng)頁(yè)。
iframe 是個(gè)雙標(biāo)簽，基本語(yǔ)法為：尖角號(hào)iframe，尖角號(hào) /iframe。
iframe 標(biāo)簽有五個(gè)基本屬性：
src 屬性，資源的意思，用以引入其他網(wǎng)站的頁(yè)面，值是一個(gè)頁(yè)面路徑。
width 屬性，寬度的意思，用以控制引入頁(yè)面的寬度，值是一個(gè)數(shù)字。
height 屬性，高度的意思，用以控制引入頁(yè)面的高度，值是一個(gè)數(shù)字。
frameborder 屬性，框架邊框的意思，默認(rèn)引入的框架帶有邊框，通常情況下將該屬性值設(shè)置為0，來(lái)取消框架的邊框。
scrolling[?skr??l??] 屬性，滾動(dòng)的意思，用來(lái)控制是否顯示框架的滾動(dòng)條，值有三個(gè)：
auto，在需要的情況下出現(xiàn)滾動(dòng)條，也是默認(rèn)值。
yes，始終顯示滾動(dòng)條。
no，從不顯示滾動(dòng)條。
我們來(lái)做個(gè)例子。
打開(kāi)編輯器，新建一個(gè) iframe-demo.html 文件，補(bǔ)全基礎(chǔ)代碼，在 body 里添加 iframe 標(biāo)簽，首先定義 src 屬性，值為 http://www.qfedu.com，frameborder 屬性的值設(shè)置為1，顯示邊框。保存頁(yè)面。
在瀏覽器中打開(kāi)頁(yè)面。千鋒教育的官網(wǎng)在 iframe 的默認(rèn)大小的窗口里顯示了。
返回編輯器，給 iframe 定義屬性 width 等 800，height 等于 600，保存。
回到瀏覽器，刷新，iframe 的窗口變大了。可以通過(guò)滾動(dòng)條查看網(wǎng)站內(nèi)容。
返回編輯器，如果給iframe 定義一個(gè)scrolling 屬性，值為 no 的話，滾動(dòng)條就不見(jiàn)了。
回到瀏覽器，刷新。此時(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 窗口里打開(kāi)了。
<iframe name="iframe_a">
<a href="http://www.qfedu.com/" target="iframe_a">千鋒教育</a>
我們?cè)賮?lái)看個(gè)例子，當(dāng)點(diǎn)擊三個(gè)鏈接，iframe 里顯示了相應(yīng)鏈接的網(wǎng)站。
我們來(lái)實(shí)現(xiàn)這個(gè)例子。
回到編輯器，創(chuàng)建一個(gè) iframe-example.html 文件，補(bǔ)全基本代碼，在 body 里添加一個(gè) div 容器，在容器里添加一個(gè) iframe，定義屬性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。
在瀏覽器中打開(kāi)頁(yè)面，一個(gè) iframe 框架做好了。
回到編輯器，在 body 里的第一行再添加一個(gè) div 容器，在容器里書(shū)寫(xiě) 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é)里，通過(guò)添加小括號(hào)來(lái)設(shè)置運(yùn)算優(yōu)先級(jí)的法則。
我們?cè)?a 的前面，b 的后面填上一對(duì)括號(hào)， (a[href target=iframe_a]>b)*3 我們把這個(gè) emmet 放到注釋里保存一下。
將光標(biāo)移至 emmet 語(yǔ)句的結(jié)尾，按下 tab。期望的代碼生成了。
如果你是完美主義者，這個(gè)代碼你也不滿意，能不能換行顯示三個(gè) a 標(biāo)簽?zāi)兀看蠹腋乙黄鹱觯?/span>
點(diǎn)擊 VSCode 左下角的齒輪圖標(biāo)，再點(diǎn)擊設(shè)置，打開(kāi)設(shè)置窗口。
點(diǎn)擊擴(kuò)展菜單，再點(diǎn)擊 emmet，找到 Syntax(森太課思) Profiles，在 settings（賽ten 思）.json 中編輯。
在這里輸入 html 冒號(hào) 大括號(hào)，在大括號(hào)里寫(xiě)入 inline_break 冒號(hào) 2，表示標(biāo)簽數(shù)大于 兩 組，就折行顯示。
"html": {
"inline_break": 2
},
關(guān)閉設(shè)置。
把剛才保存的 emmet 命令再拷貝過(guò)來(lái)，按下 tab 鍵，完美的代碼生成了！
給三個(gè)a 標(biāo)簽填好鏈接地址和文本內(nèi)容。
這里需要注意，a 鏈接的地址可以是互聯(lián)網(wǎng)的網(wǎng)站地址，也可以是你自己制作的本地頁(yè)面地址，這些頁(yè)面都可以在 iframe 中顯示。
我們發(fā)現(xiàn)三個(gè)鏈接的target屬性都指向了同一個(gè)iframe。保存一下頁(yè)面。
回到瀏覽器，刷新。分別點(diǎn)擊三個(gè)鏈接，iframe 里分別顯示了三個(gè)網(wǎng)站的頁(yè)面。
文章配套視頻鏈接「鏈接」
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
