偽類就是可以通過直接添加一個類樣式達到同等效果，而偽元素，則需要先添加一個元素，然后在元素上添加樣式才能達到同等效果
偽類
:active 向被激活的元素添加樣式。
:focus 向擁有鍵盤輸入焦點的元素添加樣式。
:hover 當鼠標懸浮在元素上方時，向元素添加樣式。
:link 向未被訪問的鏈接添加樣式。
:visited 向已被訪問的鏈接添加樣式。
:first-child 向元素的第一個子元素添加樣式。
:lang 向帶有指定 lang 屬性的元素添加樣式。

偽元素
:first-letter 向文本的第一個字母添加特殊樣式。
:first-line 向文本的首行添加特殊樣式。
:before 在元素之前添加內容。
:after 在元素之后添加內容。

偽元素和偽類之所以這么容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
:Pseudo-classes
::Pseudo-elements
但因為兼容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。

一些常用的css偽元素和偽類的用法

通過css3偽類選擇器： :nth-child() 可以選擇表格或li等有規律元素的偶數行。
odd表示奇數行，even表示偶數行;
tr:nth-child(odd) {background-color: #333;}
tr:nth-child(even) {background-color: #f9f9f9;}

使用first-child和last-child偽類設置最后和第一個元素：
table tr:first-child {background: #eee}
table tr: last-child{background: #eee}

偽元素:before和:after用法
:before是css中的一種偽元素，可用于在某個元素之前插入某些內容。
:after是css中的一種偽元素，可用于在某個元素之后插入某些內容。

//html <p>ello Worl</p> //cssp:before{content: "H" /*:before和:after必帶技能，重要性為滿5顆星*/}p:after{content: "d" /*:before和:after必帶技能，重要性為滿5顆星*/}

結果輸出“Hello World”

參考
https://segmentfault.com/a/1190000000484493

總結

以上是生活随笔為你收集整理的理解css伪类和伪元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。