偽類與偽元素

2021-09-24 16:29:44 字數 1241 閱讀 4116

偽類:用於向某些選擇器新增特殊的效果,當已用元素處於某種狀態時,為其新增對應的樣式

偽元素:用於將特殊的效果新增到某些選擇器,用於建立一些不存在文件樹中的元素,為其新增樣式

區別

使用偽元素清除浮動

class

="container clearfix"

>

class

="wrap"

>

aaadiv

>

div>

.clearfix:after

.clearfix

注意

偽元素預設是 inline

空元素(不能包含內容的元素,例如input、img、textarea等)不支援 ::before,::after

使用偽元素before,after必須設定content

使用偽元素before,after顯示背景圖,一定要使用display設定為塊元素

使用偽元素before,after設定為display:inline-block,需要再次設定vertical-align:middle

如果 content 的值是常量,必須用單引號或雙引號括起來。如:content:『abc』; , content:「abc」;。

如果 content 的值是該元素的某個屬性於常量組合而成的,常量仍然要用單引號或雙引號括起來,之間不需要加號。如:content: 『(『attr(title)』)』;。

偽元素 ::first-letter,::first-line 只對 display 為 block 和 inline-block 之類的塊級元素有效。

對內容的開頭是符號,或者第乙個是英文本母或數字,第二個是符號的,使用 ::first-letter 來設定樣式時,會對第乙個字母和符號都生效。

特殊字元

content 中這麼寫

空格content:"\00a0";

<

content:"\003c";

>

content:"\003e";

&content:"\0026";

"content:"\0022";

content:"\00a9";

®content:"\00ae";

×content:"\00d7";

偽類與偽元素?

偽類與偽元素?偽類指偽類名稱前為冒號 偽元素指偽元素名稱前為雙冒號 偽類本質上是為了彌補常規css選擇器的不足,以便獲取到更多資訊。通常表示獲取不存在與dom樹中的資訊,或獲取不能被常規css選擇器獲取的資訊。如 hover focus empty 本質上是建立了乙個有內容的虛擬容器。這個容器不包含...

偽類與偽元素

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

偽類與偽元素

一 偽類 1 定義 css偽類用於向某些選擇器新增特殊效果。偽類其實與普通的css類相類似,可以為已有的元素新增樣式,但是他只有處於dom無法描述的狀態下才能為文件樹中的元素新增樣式,所以將其稱為偽類。這種文件樹無法描述的狀態是什麼呢?當乙個元素在使用者的不同行為下就變化成不同的狀態這個行為的變化d...