什麼是僞元素?
僞元素在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選擇器的不足,它使選擇更靈活,代碼更簡潔。