css偽類用於向某些選擇器新增特殊的效果1.css3之前的偽類(狀態偽類)
圖中前5個為
狀態偽類2.css3新增的偽類(結構偽類)
屬性說明
x:first-child
其父元素的首個子元素。ie7就可以支援
x:last-child
匹配父元素中最後乙個x元素
x:nth-child(n)
用於匹配索引值為n的子元素。索引值從1開始
x:only-child
這個偽類一般用的比較少，比如上述**匹配的是div下的有且僅有乙個的p，也就是說，如果div內有多個p，將不匹配。
x:nth-last-child(n)
從最後乙個開始算索引。
x:first-of-type
匹配同級兄弟元素中的第乙個x元素；
x:last-of-type
匹配同級兄弟元素中的最後乙個x元素
x:nth-of-type(n)
匹配同型別中的第n個同級兄弟元素x
x:only-of-type
匹配屬於同型別中唯一兄弟元素的x
x:nth-last-of-type(n)
匹配同型別中的倒數第n個同級兄弟元素
x :root
匹配文件的根元素。在html（標準通用標記語言下的乙個應用）中，根元素永遠是html
x:empty
匹配沒有任何子元素（包括包含文字）的元素x
3.css3偽類的定義
(1)獲取不存在於dom樹中的資訊,比如
標籤的::link,:visited等,這些資訊不存在於dom樹中,只能通過css選擇器來獲取(2) 獲取不能被常規
css選擇器獲取的資訊,比如偽類:targetcss偽元素用於向某些選擇器設定特殊效果1.css3之前的偽元素
2.css3新增的偽元素
::selection匹配被使用者選擇或者處於高亮狀態的部分,該元素只支援雙冒號
::placeholder匹配佔位符的文字,只有元素設定placeholder屬性,該偽元素才會生效(1) 偽元素和偽類都是為了給一些特殊需求加樣式,定義基本一致
(2)為了避免混淆偽類和偽元素的寫法,
css3中標準規定偽類使用單冒號:,偽元素使用雙冒號::,但在此之前都是用的是單冒號,所以為了保證相容偽元素,兩種使用方法都可以,但是css3新增的只能用雙冒號(3)可以同時使用多個偽類,但只能使用乙個偽元素
(4) 偽類與類優先順序相同,偽元素與標籤優先順序相同color:red
}color
:red
}
(5) 偽元素本質上是建立了乙個有內容的虛擬容器,這個容器不包含任何dom元素,但是可以包含內容.
擴充套件優先順序判斷:
權值演算法:!important > 行內樣式 > id選擇器 > 類選擇器 > 標籤選擇器 > 萬用字元 > 繼承選擇器權值
!import
權重最大,優先順序最高
內聯樣式表
權值1000
id選擇器權值
權值100
class類/偽類
權值10
html標籤/偽元素
權值 1
當我們寫樣式時,如果遇到優先順序的問題,可以按選擇器中規則對應做加法,
比較權值大小,權值大,優先順序越高,如果權值相同,後面的覆蓋前面的.css偽類和偽元素
css偽類用於向某些選擇器新增特殊的效果。link,visited,hover,focus,active,first child,lang css3新增的偽類 last child,only child,first of type,last of type,only of type,nth chil...
CSS偽類和偽元素
css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說，偽類和偽元素是用來修飾不在文件樹中的部分，比如，一句話中的第乙個字母，或是列表中的第乙個元素，又或者是滑鼠懸停在某個超連結上時要設定的樣式。常見的狀態偽類主要包括 link 應用於未被訪問過的鏈結 hover 應用於滑鼠懸停到的元素 ...
css偽類，偽元素
偽類作用於整個元素，比如 a link a hover div first child 儘管這些條件都不是基於dom的，但結果沒乙個都是作用於乙個完整的元素，比如整個鏈結，段落，div等等 偽元素作用於元素一部分，比如 p first line p first letter 偽元素作用於元素的一部分...