僞元素/僞類

什麼是僞元素?

僞元素在DOM中創建了一些抽象元素,而且這些元素本身時不存在與DOM中的。在CSS3中僞元素前要使用::(兩個冒號)。
比如

使用在使用::before  和 ::after時,要使用content進行內容設置。默認情況下,僞元素插入的內容爲行內元素,不過可以使用display進行設置。
注意:同時只能使用一個僞元素

什麼是僞類?

僞類是用來獲取DOM中不存在的信息(比如<a>的link,hover,visited等狀態),或者獲取常規CSS選擇器不能獲取的信息(比如僞類:target)。
部分僞類如下:

使用僞類可以和很方便地根據已有的DOM元素對目標元素進行選擇。可以使選擇更加靈活,同時減少了類和id的使用。
比較典型的例子是通過使用僞類nth-child(n)選擇屬於父元素的第n個子元素。
p:nth-child(3){
color:black;
}
p:nth-child(2n){
color:red);
}

上面的代碼將DOM中所有p元素中第三個子元素字體顏色設置爲黑色。然後又將所有p元素的偶數個子元素字體顏色設置爲紅色。

注意:可以同時使用多個僞類。

小結:

僞元素相當於無中生有,創建一個空的元素,然後將內容添加進去。而僞類則是用來彌補CSS選擇器的不足,它使選擇更靈活,代碼更簡潔。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章