css偽類(lèi)和偽元素之間有什么區(qū)別

這篇文章主要介紹了css偽類(lèi)和偽元素之間有什么區(qū)別，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

偽類(lèi)

偽類(lèi)是選擇HTML文檔的某些部分的方式，原則上不是基于HTML文檔樹(shù)本身及其元素，也不是基于名稱(chēng)，屬性或內(nèi)容等特征，而是基于其他抽象條件，如語(yǔ)言編碼或動(dòng)態(tài)狀態(tài)一個(gè)元素。

原始偽類(lèi)定義了隨著時(shí)間的推移或通過(guò)用戶(hù)干預(yù)進(jìn)入和退出的元素的動(dòng)態(tài)狀態(tài)。CSS2在此概念上進(jìn)行了擴(kuò)展，以包括虛擬概念文檔組件或文檔樹(shù)的推斷部分，例如first-child。偽類(lèi)的運(yùn)作就好像將幻象類(lèi)添加到各種元素中一樣。

限制：與偽元素不同，偽類(lèi)可以出現(xiàn)在選擇器鏈中的任何位置。

示例偽類(lèi)代碼：

a:link /* 選擇未訪(fǎng)問(wèn)過(guò)的“a”元素*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* 字體顏色為黑 */
background-color : #99FF99; /* 設(shè)置為淡綠色*/
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* 這將選擇任何已訪(fǎng)問(wèn)其目標(biāo)的“a”元素。*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* 這將選擇處于懸停狀態(tài)的任何“a”元素。這是指針在元素的渲染區(qū)域內(nèi)移動(dòng)期間的狀態(tài)。用戶(hù)指定元素但不激活它。 */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* 這將選擇當(dāng)前具有焦點(diǎn)的任何“a”元素。焦點(diǎn)是元素接受鍵盤(pán)輸入或其他形式的文本輸入的狀態(tài)。 */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /*這將選擇處于激活狀態(tài)的任何“a”元素?；顒?dòng)是指針激活期間的狀態(tài)（例如：按下并釋放鼠標(biāo)）在元素的渲染區(qū)域內(nèi)*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

偽元素

pseudo-elements用于處理元素的子部分。它們?cè)试S您在元素內(nèi)容的一部分上設(shè)置樣式，超出文檔中指定的內(nèi)容。換句話(huà)說(shuō)，它們?cè)试S定義邏輯元素，這些元素實(shí)際上不在文檔元素樹(shù)中。邏輯元素允許在CSS選擇器中處理隱含的語(yǔ)義結(jié)構(gòu)。

限制：偽元素只能應(yīng)用于外部和文檔級(jí)上下文 - 而不是內(nèi)嵌樣式。偽元素受限于它們可以出現(xiàn)在規(guī)則中的位置。它們可能只出現(xiàn)在選擇器鏈的末尾（在選擇器的主題之后）。它們應(yīng)該出現(xiàn)在選擇器中找到的任何類(lèi)或ID名稱(chēng)之后。每個(gè)選擇器只能指定一個(gè)偽元素。要在單個(gè)元素結(jié)構(gòu)上處理多個(gè)偽元素，必須創(chuàng)建多個(gè)樣式選擇器/聲明語(yǔ)句。

偽元素可用于常見(jiàn)的印刷效果，例如初始上限和首字下沉。它們還可以處理源文檔中不存在的生成內(nèi)容（使用“之前”和“之后”）下面添加了屬性和值的一些偽元素的示例樣式表。

/* 以下規(guī)則選擇標(biāo)題1的第一個(gè)字母，并將字體設(shè)置為2em，草書(shū)，綠色背景。第一個(gè)字母選擇塊級(jí)元素的第一個(gè)呈現(xiàn)的字母/字符。 */
h2:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}
/* 以下規(guī)則選擇段落中第一個(gè)顯示的行并使其變?yōu)榇煮w。第一行選擇塊級(jí)元素的輸出設(shè)備上的第一個(gè)渲染行。 */
p:first-line {
font-weight : bold;
}
/* 以下規(guī)則選擇在blockquote之前放置的任何內(nèi)容，并在帶有綠色背景的粗體小型大寫(xiě)字母中插入短語(yǔ)“當(dāng)天的引用：”。 */
blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}
/* 以下規(guī)則選擇放在“q”元素之前的任何內(nèi)容并插入智能打開(kāi)引號(hào)。 */
q:before {
content : open-quote;
}
/* 以下規(guī)則選擇放在“q”元素后面的任何內(nèi)容并插入智能關(guān)閉引用。*/
q:after{
content : close-quote;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css偽類(lèi)和偽元素之間有什么區(qū)別內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!