偽元素與偽類的區別

2021-10-12 21:57:06 字數 944 閱讀 4317

偽類和偽元素的異同

css selectors level 3

該規範中為偽類和偽元素做了區分,偽類使用單冒號,偽元素開始使用雙冒號。

比如偽類:first-child

偽元素::first-line、::first-letter、::before、::after

css 3在css2.1的基礎上增加了不少偽類:target、ui元素狀態的偽類:checked等、結構性偽類:nth-child()等,具體可以看規範。

css selectors level 4草案

該草案中又增加了很多新的偽類,比如與input控制狀態、值狀態、值校驗相關的偽類,樹形結構的偽類,網格結構的偽類等。

css pseudo-elements module level 4——w3c first public working draft, 15 january 2015

增加了一些偽元素,如:

selecting highlighted content: the ::selection, ::spelling-error, and ::grammar-error pseudo-elements,

placeholder input: the ::placeholder pseudo-element。

常見應用

偽類:a鏈結樣式

隔行變色

偽元素:

最常見的使用偽元素after清除浮動,

.fix

.fix:after,.fix::after

letter-spacing+first-letter實現按鈕文字隱藏

首行、首字母樣式

總結

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

偽類與偽元素的區別

css 引入偽類和偽元素的概念是為了實現基於文件樹之外的資訊的格式化 偽類用於向某些選擇器新增特殊的效果。偽類選擇元素基於的是當前元素處於的狀態,或者說元素當前所具有的特性,而不是元素的id class 屬性等靜態的標誌。由於狀態是動態變化的,所以乙個元素達到乙個特定狀態時,它可能得到乙個偽類的樣式...

偽類與偽元素的區別

w3c關於偽類偽元素的定義 種類firsti second i p p i first child 效果 如何模擬上述效果?新增類 class first child firsti second i p first child 再看偽元素的效果及模擬 hello world p p first le...

偽類與偽元素的區別

詳解偽類與偽元素推薦 偽類與偽元素的區別 偽類本質上是為了彌補常規css選擇器的不足,以便獲取更多的資訊。偽元素本質上是建立乙個有內容的虛擬容器。css3中偽類和偽元素語法不同。偽類 link hover 偽元素 before after 可以同時使用多個偽類,卻只能同時使用乙個偽元素。其中偽元素和...