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方面的困惑點,這一篇的主題是 偽類和偽元素。偽類和偽元素的根本區別在於 它們是否創造了新的元素 抽象 從我們模仿其意義的角度來看,如果需要新增新元素加以標識的,就是偽元素,反之,如果只需要在既有元素上新增類別的...
偽類和偽元素的區別
學習這麼長時間對於一些基本點還是不太理解,所以在這裡進行了區分 第一種理解偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。第二種理解 偽類的效果可以通過新增乙個實際的類來達到,而偽元素的效果則需要通過新增乙個實際的元素才能達到,這也是為什麼他們乙個稱為偽類,乙個稱為偽元素...