偽類和偽元素的區別

2021-09-17 02:38:18 字數 2057 閱讀 1957

css偽類用於獲取不存在於dom樹中的資訊,比如標籤的:link、visited等;還可以用於獲取不能被常規css選擇器獲取的資訊,比如:first-child,:last-child。

偽類選擇器匹配的是元素。

偽類

描述:link

用來選中元素當中的鏈結。它將會選中所有尚未訪問的鏈結。

:visited

表示使用者已訪問過的鏈結。

:hover

滑過元素時,pc端指滑鼠,移動端指觸控(通常會有bug)

:active

匹配被使用者啟用的元素。即滑鼠主鍵按下的元素或者tab鍵選中的元素,並不限於a和button。

:focus

表示獲得焦點的元素

:target

代表乙個唯一的頁面元素(目標元素)。

:root

匹配文件樹的根元素,除了優先順序更高之外,與html選擇器相同

:first-child

其子元素中的第乙個元素

:last-child

其子元素中的最後乙個元素

:nth-child()

找到其子元素中符合條件的元素

:first-of-type

查詢同型別的兄弟元素中的第乙個

:last-of-type

查詢同型別的兄弟元素中的最後乙個

:nth-of-type()

查詢同型別的兄弟元素中的第n個

:nth-last-of-type()

從後往前查詢同型別的兄弟元素中的第n個

:only-child

只要乙個子元素的元素

:only-of-type

代表了任意乙個元素,這個元素沒有其他相同型別的兄弟元素

:empty

代表沒有子元素的元素,子元素有空格和文字都不行,但可以是注釋

:not()

匹配不符合引數選擇器描述的元素,不能包含另乙個not選擇器

:enabled

表示任何啟用的(enabled)元素。如果乙個元素能夠被啟用或獲取焦點,則該元素是啟用的

:disabled

表示任何被禁用的元素

:checked

表示任何處於選中狀態的radio/checkbox

:valid

表示任意內容通過驗證的或其他元素

:invalid

表示任意內容未通過驗證的或其他元素

:in-range

代表乙個元素,其當前值處於屬性min 和max 限定的範圍之內

:out-of-range

代表乙個元素,其當前值處於屬性min 和max 限定的範圍外

:required

表示任意擁有required屬性的

:optional

表示任意沒有required屬性的``

:read-only

表示元素不可被使用者編輯的狀態

:read-write

代表乙個元素可以被使用者編輯

css3規定偽元素由兩個冒號開頭作為標示::。

偽元素可以建立一些文件語言無法建立的虛擬元素。比如:元素內容的第乙個字母::first-lette或第一行::first-line。同時,偽元素還可以建立源文件不存在的內容,比如使用 ::before 或 ::after。

偽元素匹配的是元素的內容。

:before和::before的寫法是等效的; :after和::after的寫法是等效的。

:before/:after是css2的寫法,::before/::after是css3的寫法。

偽類和偽元素區別

偽類是向某些選擇器新增特殊的效果,可以通過新增乙個類來達到,用乙個冒號來表示。pseudo classes 如 first child,link visiter hover active focus lang 偽類類似於class,表示一些元素的狀態,但無需標識的分類。偽元素是將特殊的效果新增到某些...

偽類和偽元素的區別

個人的關注點可能主要集中在js方向上,但是本著css也不能丟掉的原則,所以上網查了些css方面的困惑點,這一篇的主題是 偽類和偽元素。偽類和偽元素的根本區別在於 它們是否創造了新的元素 抽象 從我們模仿其意義的角度來看,如果需要新增新元素加以標識的,就是偽元素,反之,如果只需要在既有元素上新增類別的...

偽類和偽元素的區別

學習這麼長時間對於一些基本點還是不太理解,所以在這裡進行了區分 第一種理解偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。第二種理解 偽類的效果可以通過新增乙個實際的類來達到,而偽元素的效果則需要通過新增乙個實際的元素才能達到,這也是為什麼他們乙個稱為偽類,乙個稱為偽元素...