偽元素(偽物件)和偽類的區別?
其中偽類和偽元素的根本區別在於:它們是否創造了新的元素。
偽元素/偽物件:不存在在DOM文件中,是虛擬的元素,是建立新元素。代表某個元素的子元素,這個子元素雖然在邏輯上存在,但卻並不實際存在於文件樹中。
偽物件選擇符
Properties 屬性 |
CSS Version 版本 |
Inherit From Parent 繼承性 |
Description 簡介 |
---|---|---|---|
E:first-letter/E::first-letter | CSS3/CSS1 | 無 | CSS2/CSS1 E:first-letter/E::first-letter 偽物件選擇符,設定物件內的第一個字元的樣式。 |
E:first-line/E::first-line | CSS3/CSS1 | 無 | CS3/CSS1 偽物件選擇符 E:first-line/E::first-line,設定物件內的第一行的樣式。 |
E:before/E::before | CSS3/CSS2 | 無 | CSS3/CSS3 偽物件選擇符 E:before/E::before,設定在物件前(依據物件樹的邏輯結構)發生的內容。用來和content屬性一起使用 |
E:after/E::after | CSS3/CSS2 | 無 | CSS3/CSS2 偽物件選擇符 E:after/E::after,設定在物件後(依據物件樹的邏輯結構)發生的內容。用來和content屬性一起使用 |
E::selection | CSS3 | 無 | CSS3 偽物件選擇符 E::selection,設定物件被選擇時的顏色。 |
偽類:存在DOM文件中,邏輯上存在但在文件樹中卻無須標識的“幽靈”分類。
偽類選擇符
Properties 屬性 |
CSS Version 版本 |
Inherit From Parent 繼承性 |
Description 簡介 |
---|---|---|---|
E:link | CSS1 | 無 | CSS1 偽類選擇符 E:link ,設定超連結a在未被訪問前的樣式。 |
E:visited | CSS1 | 無 | CSS1 偽類選擇符 E:visited,設定超連結a在其連結地址已被訪問過時的樣式。 |
E:hover | CSS2 | 無 | CSS2/CSS1 偽類選擇符 E:hover,設定元素在其滑鼠懸停時的樣式。 |
E:active | CSS2/CSS1 | 無 | CSS2/CSS1 偽類選擇符 E:active,設定元素在被使用者啟用(在滑鼠點選與釋放之間發生的事件)時的樣式。 |
E:focus | CSS2/CSS1 | 無 | CSS2/CSS1 偽類選擇符 E:focus,設定元素在成為輸入焦點(該元素的onfocus事件發生)時的樣式。 |
E:lang() | CSS2 | 無 | CSS2 偽類選擇符 E:lang() 匹配使用特殊語言的E元素。 |
E:not() | CSS3 | 無 | CSS3 偽類選擇符 E:not() 匹配不含有s選擇符的元素E。 |
E:root | CSS3 | 無 | CSS3 偽類選擇符 E:root,匹配E元素在文件的根元素。 |
E:first-child | CSS2 | 無 | CSS2 偽類選擇符 E:first-child 匹配父元素的第一個子元素E。 |
E:last-child | CSS3 | 無 | CSS3 偽類選擇符 E:last-child 匹配父元素的最後一個子元素E。 |
E:only-child | CSS3 | 無 | CSS3 為例選擇符 E:only-child 匹配父元素僅有的一個子元素E。 |
E:nth-child(n) | CSS3 | 無 | CSS3 偽類選擇符 E:nth-child(n) 匹配父元素的第n個子元素E。 |
E:nth-last-child(n) | CSS3 | 無 | CSS3 偽類選擇符 E:nth-last-child(n) 匹配父元素的倒數第n個子元素E。 |
E:first-of-type | CSS2 | 無 | CSS3 偽類選擇符 E:first-of-type 匹配同類型中的第一個同級兄弟元素E。 |
E:last-of-type | CSS3 | 無 | CSS3 偽類選擇符 E:last-of-type 匹配同類型中的最後一個同級兄弟元素E。 |
E:only-of-type | CSS3 | 無 | CSS3 偽類選擇符 E:only-of-type,匹配同類型中的唯一的一個同級兄弟元素E。 |
E:nth-of-type(n) | CSS3 | 無 | CSS3 偽類選擇符 E:nth-of-type(n),匹配同類型中的第n個同級兄弟元素E。 |
E:nth-last-of-type(n) | CSS3 | 無 | CSS3 偽類選擇符 E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E。 |
E:empty | CSS3 | 無 | CSS3 偽類選擇符 E:empty 匹配沒有任何子元素(包括text節點)的元素E。 |
E:checked | CSS3 | 無 | CSS3 偽類選擇符 E:checked 匹配使用者介面上處於選中狀態的元素E。(用於input type為radio與checkbox 的form元素) |
E:enabled | CSS3 | 無 | CSS3 偽類選擇符 E:enabled 匹配使用者介面上處於可用狀態的元素E。 |
E:disabled | CSS3 | 無 | CSS3 偽類選擇符 E:disabled 匹配使用者介面上處於禁用狀態的元素E。 |
E:target | CSS3 | 無 | CSS3 偽類選擇符 E:target 匹配相關URL指向的E元素。 |
@page:first | CSS2 | 無 | CSS2 偽類選擇符 @page:first 設定頁面容器第一頁使用的樣式。僅用於@page規則 |
@page:left | CSS2 | 無 | CSS2 偽類選擇符 @page:left 置頁面容器位於裝訂線左邊的所有頁面使用的樣式。僅用於@page規則 |
@page:right | CSS2 | 無 | CSS2 為物件選擇符 @page:right 設定頁面容器位於裝訂線右邊的所有頁面使用的樣式。僅用於@page規則 |
再看看W3C中對於二者應用的描述:
偽類:用於向某些選擇器新增特殊的效果
偽元素:用於將特殊的效果新增到某些選擇器
其實根本意思就是就是對那些不能通過class、id等選擇元素的補充
舉個栗子:
<div>
<p>a</p>
<p>b c</p>
</div>
如果我們想要第一個p標籤字型顏色變紅怎麼做呢 使用偽類就會很簡單:
p:first-child {
color: red;
}
但是如果不用偽類我們怎麼做呢? 這時我們就需要為第一個p標籤新增一個類class
<div>
<p class="first-child">a</p>
<p>b c</p>
</div>
p:first-child {
color: red;
}
可以實現同樣的效果,但是需要多寫一個類
如果使用偽元素該如何實現上述操作呢?
p::first-letter {
color: red;
}
如果不用偽元素我們怎麼做呢?
<div>
<p><span>a</span></p>
<p>b c</p>
</div>
p span {
color: red;
}
可以看出二者區別了,
偽類的效果可以通過新增實際的類來實現
偽元素的效果可以通過新增實際的元素來實現
所以它們的本質區別就是是否抽象創造了新元素
注意:
偽類只能使用“:”
而偽元素既可以使用“:”,也可以使用“::”
因為偽類是類似於新增類所以可以是多個,而偽元素在一個選擇器中只能出現一次,並且只能出現在末尾
相關問題
:after/::after和:before/::before的異同
相同點
都可以用來表示偽類物件,用來設定物件前的內容
:before和::before寫法是等效的; :after和::after寫法是等效的
不同點
:before/:after是Css2的寫法,::before/::after是Css3的寫法
:before/:after 的相容性要比::before/::after好 ,
不過在H5開發中建議使用::before/::after比較好
注意:
偽物件要配合content屬性一起使用
偽物件不會出現在DOM中,所以不能通過js來操作,僅僅是在 CSS 渲染層加入
偽物件的特效通常要使用:hover偽類樣式來啟用
eg:當滑鼠移在span上時,span前插入”duang”
<style>
span{
background: yellow;
}
span:hover::before{
content:"duang";
}
</style>
<span>222</span>
---------------------
作者:403-forbidden
來源:CSDN
原文:https://blog.csdn.net/weixin_39173093/article/details/80685499
版權宣告:本文為博主原創文章,轉載請附上博文連結!