詳解 CSS 屬性 - 偽類和偽元素的區別

jiekechoo 發布于2019-08-28 17:55 / 672人閱讀

摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。

之前寫了一篇《詳解 CSS 屬性 - :before && :after》的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @riophae 兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。
首先，閱讀 w3c 對兩者的定義：

CSS 偽類用于向某些選擇器添加特殊的效果。

CSS 偽元素用于將特殊的效果添加到某些選擇器。

可以明確兩點，第一兩者都與選擇器相關，第二就是添加一些“特殊”的效果。這里特殊指的是兩者描述了其他 css 無法描述的東西。

偽類種類

偽元素種類

區別

這里用偽類 :first-child 和偽元素 :first-letter 來進行比較。

p>i:first-child {color: red}

    first
    second

//偽類 :first-child 添加樣式到第一個子元素
如果我們不使用偽類，而希望達到上述效果，可以這樣做：

.first-child {color: red}

    first
    second

即我們給第一個子元素添加一個類，然后定義這個類的樣式。那么我們接著看看為元素：

p:first-letter {color: red}
I am stephen lee.

//偽元素 :first-letter 添加樣式到第一個字母
那么如果我們不使用偽元素，要達到上述效果，應該怎么做呢？

.first-letter {color: red}
I am stephen lee.

即我們給第一個字母添加一個 span，然后給 span 增加樣式。
兩者的區別已經出來了。那就是：

偽類的效果可以通過添加一個實際的類來達到，而偽元素的效果則需要通過添加一個實際的元素才能達到，這也是為什么他們一個稱為偽類，一個稱為偽元素的原因。

總結

偽元素和偽類之所以這么容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。

:Pseudo-classes
::Pseudo-elements

但因為兼容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。

GPU云服務器云服務器 java抽象類和接口的區別 css和html的區別 css與html的區別 html和css的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110898.html

詳解 CSS 屬性 - 偽類和偽元素的區別

摘要：之前寫了一篇詳解屬性的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區別這里用偽類和偽元素來進行比較。之前寫了一篇《詳解 CSS 屬性 - :before && :after》的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 @ri...

AZmake 2019-08-01 14:39 評論0 收藏0
CSS偽類偽元素詳解

摘要：選擇器大致可以分成類基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。但偽類和偽元素相對比較抽象，稍微有一點點理解上的難度。本篇就是我對偽類和偽元素的理解。 CSS選擇器大致可以分成5類：基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。基本，層次，屬性選擇器比較容易理解，畢竟它們選擇的對象都屬于DOM中看得見摸得著的元素。但偽類和偽元素相對比較抽象，稍微有一點點理解上的難度。本篇就是...

lookSomeone 2019-08-29 11:09 評論0 收藏0
CSS基礎篇-- :before && :after的用法，偽類和偽元素的區別

摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...

X_AirDu 2019-08-28 18:15 評論0 收藏0
我終于理解了偽類和偽元素

摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間...

張遷 2019-08-30 14:05 評論0 收藏0
css偽類和偽元素的區別，:before和::before的區別

摘要：偽類用于選擇樹之外的信息，或是不能用簡單選擇器進行表示的信息。比如表示選擇元素內容的之前內容，也就是表示選擇元素被選中的內容。是的寫法，是的寫法。偽類用于選擇DOM樹之外的信息，或是不能用簡單選擇器進行表示的信息。前者包含那些匹配指定狀態的元素，比如:visited，:active；后者包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，:...

jeffrey_up 2019-04-23 13:16 評論0 收藏0