前端面試題-僞類和僞元素

一、僞類和僞元素的引入

CSS
引入僞類和僞元素的概念是爲了格式化文檔樹以外的信息。也就是說,僞類和僞元素是用來修飾不在文檔樹中的部分,比如,一句話中的第一個字母,或者是列表中的第一個元素。

二、僞類的概念

1、規範解釋

僞類用於當已有元素處於的某個狀態時,爲其添加對應的樣式,這個狀態是根據用戶行爲而動態變化的。

2、舉例說明

當用戶懸停在指定的元素時,我們可以通過 :hover 來描述這個元素的狀態。雖然它和普通的 CSS
類相似,可以爲已有的元素添加樣式,但是它只有處於 DOM 樹無法描述的狀態下才能爲元素添加樣式,所以將其稱爲僞類。

三、僞元素的概念

1、規範解釋

僞元素用於創建一些不在文檔樹中的元素,併爲其添加樣式。

2、舉例說明

我們可以通過 :before 來在一個元素前增加一些文本,併爲這些文本添加樣式。雖然用戶可以看到這些文本,但是這些文本實際上不在文檔樹中。

我的理解:

僞類用於當已有元素處於的某個狀態時,爲其添加對應的樣式,這個狀態是根據用戶行爲而動態變化的。比如說,當用戶懸停在指定的元素時,我們可以通過:hover 來描述這個元素的狀態。雖然它和普通的 css 類相似,可以爲已有的元素添加樣式,但是它只有處於 dom 樹無法描述的狀態下才能爲元素添加樣式,所以將其稱爲僞類。
僞元素用於創建一些不在文檔樹中的元素,併爲其添加樣式。比如說,我們可以通過:before 來在一個元素前增加一些文本,併爲這些文本添加樣式。雖然用戶可以看到這些文本,但是這些文本實際上不在文檔樹中。

四、僞類與僞元素的具體用法

可以查W3C官方文檔或者點這裏mdn
在這裏插入圖片描述

在這裏插入圖片描述
某些僞類或僞元素仍然處於試驗階段,在使用前建議先在 Can I use等網站查一查其瀏覽器兼容性。處於試驗階段的僞類或僞元素會在標題中標註。

按照規範,應該使用雙冒號(::)而不是單個冒號(:),以便區分僞類和僞元素。但是,由於舊版本的 W3C 規範並未對此進行特別區分,因此目前絕大多數的瀏覽器都同時支持使用這兩種方式來表示僞元素。

閱讀更多:daydaylee
參考文章mdn WEBING

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