偽元素 偽類和選擇器之間的區別

2022-07-27 10:12:08 字數 945 閱讀 6456

今天我們來了解一下偽元素和選擇器、偽類的有什麼區別呢?

首先了解選擇器以及css

css呢是建立html網頁的樣式,這個就不用多說了

選擇器型別首先我們知道的有類選擇器、id選擇器、子代選擇器、元素選擇器、標籤選擇器等

同時呢偽元素是指c3的屬性,是一種特殊的樣式

常用的有:after 和 :before 元素的前面和後面建立虛擬dom

偽類常用的四種方式:

a{:link =>   a 標籤(預設)

:hover =>  滑鼠放在a標籤

:active =>  滑鼠點a標籤

:visited =>  a標籤被訪問過

用例題就可以看懂

這是蛋殼公寓的腳注部分,可以看到兩條顏色很淺淡的虛線,很多同學第一時間想起來的就是div的border寫的,它其實是由我們的偽元素寫出來的

效果圖就是這樣的

我們可以在控制台這裡看到兩個偽元素的存在,它們的存在與選擇器或者偽類的存在都不一樣,因為他們是虛擬的,在控制台顯示也是不一樣的

三者的區別就是:在dom元素中是否存在?

css選擇器是存在於dom元素中的,佔據空間

c3偽元素是不存在與dom元素中的,我們可以在控制台看到內容那裡看到,因為它建立的虛擬的dom,而且w3c規定了它的書寫格式 偽元素是有兩個冒號開頭作為標識

偽類是通過一些特定的選擇器根據特定的狀態來給它特殊的樣式,他不會修改dom元素

偽元素和偽元素選擇器

偽元素 after和 before after是乙個css偽元素,使用 after,你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示,基本的效果是這樣的 雙冒號 和單冒號 的區別 所有支援css3的雙冒號 ...

偽類選擇器和偽元素選擇器簡單理解

元素選擇器 如上面的p 實實在在的存在的元素。偽元素選擇器 dom中不存在的元素,僅僅是css中用來渲染,新增一些特殊效果的,比如p before,選擇p標籤 真元素 前面的假元素 偽元素,p標籤前面沒有元素,只是假設有 類選擇器 真實有的類,我們自己正兒八經定義的類,如p.test1,選擇p標籤 ...

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...