css偽元素和偽類的區分

2021-07-14 17:12:40 字數 865 閱讀 4935

偽類用於向某些選擇器新增特殊的效果。

偽元素用於將特殊的效果新增到某些選擇器。

偽類有::first-child ,:link:,vistited,:hover,:active,:focus,:lang 

偽元素有::first-line,:first-letter,:before,:after  

使用偽類:

first

second

如果我們不使用偽類,而希望達到上述效果,可以這樣做:

不使用偽類:

first

second

即我們給第乙個子元素新增乙個類,然後定義這個類的樣式。

使用為元素:

i am stephen lee.

那麼如果我們不使用偽元素,要達到上述效果,應該怎麼做呢?

不使用為元素:

i am stephen lee.

即我們給第乙個字母新增乙個 span,然後給 span 增加樣式。

兩者的區別已經出來了。那就是:

偽類的效果可以通過新增乙個實際的類來達到,而偽元素的效果則需要通過新增乙個實際的元素才能達到,這也是為什麼他們乙個稱為偽類,乙個稱為偽元素的原因。

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

:pseudo-classes         //偽類

::pseudo-elements       //偽元素

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

css偽類和偽元素

css偽類用於向某些選擇器新增特殊的效果。link,visited,hover,focus,active,first child,lang css3新增的偽類 last child,only child,first of type,last of type,only of type,nth chil...

CSS偽類和偽元素

css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說,偽類和偽元素是用來修飾不在文件樹中的部分,比如,一句話中的第乙個字母,或是列表中的第乙個元素,又或者是滑鼠懸停在某個超連結上時要設定的樣式。常見的狀態偽類主要包括 link 應用於未被訪問過的鏈結 hover 應用於滑鼠懸停到的元素 ...

偽類 偽元素 如何區分

前段時間在寫網頁的時候,使用了css的偽元素 after來實現樣式,故而重溫了一下偽類和偽元素。平時實現的時候便是拿出來用,但是真正區分兩者的概念的時候卻有點混淆了。首先,檢視一下w3s對偽類和偽元素的定義 偽類 用於向某些選擇器新增特殊效果。偽元素 向某些選擇器設定特殊效果。對於我這種理解能力比較...