CSS選取器總結，css選取器

CSS選取器總結，css選取器

選取器             　  優先順序                 執行個體
ID選取器         　　100
類別選取器        　　  10
偽類別選取器　　　　 10                    :link :visited :focus :hover :actived :lang
　　UI元素狀態偽類　　　　　　 　　E:enabled{}匹配所有使用者介面（form表單）中處於可用狀態的E元素
　　　　　　　　　　　　　　　　　　E:disabled{}匹配所有使用者介面（form表單）中處於不可用狀態的E元素
　　　　　　　　　　　　　　　　　　E:checked{}匹配所有使用者介面（form表單）中處於選中狀態的E元素
　　結構性偽類　　　　　　　　 　　 E:first-child{}匹配父元素中第一個E元素
　　　　　　　　　　　　　　　　　　E:last-child{}匹配父元素中最後一個E元素
　　　　　　　　　　　　　　　　　　E:nth-child(n){}匹配第n個子項目E
　　　　　　　　　　　　　　　　　　E:nth-last-child(n){}匹配倒數第n個結構子項目E
　　　　　　　　　　　　　　　　　　E:nth-of-type(n){}匹配同類型中的第n個同級兄弟元素E
　　　　　　　　　　　　　　　　　　E:nth-last-of-type(n){}匹配同類型中的倒數第n個同級兄弟元素E
　　　　　　　　　　　　　　　　　　E:first-of-type{}匹配同級兄弟元素中的第一個E元素
　　　　　　　　　　　　　　　　　　E:only-child{}匹配屬於父元素中唯一子項目的E
　　　　　　　　　　　　　　　　　　E:only-of-type{}匹配屬於同類型中唯一兄弟元素的E
　　　　　　　　　　　　　　　　　　E:root{} 不常用 匹配文檔的根項目。在HTML中，根項目永遠是HTML
　　　　　　　　　　　　　　　　　　E:empty{} 不常用 匹配沒有任何子項目（包括text節點）的元素E
　　否定偽類　　　　　　　　　　　  p:not(s){}匹配所有不匹配簡單選擇符s的元素p
　　目標偽類　　　　　　　　　　　  不常用
屬性選取器        　　10
　　簡單屬性選取器　　　　　　　　   h1[foo]{color:red;}
　　具體屬性值選取器　　　　　　　　h1[foo="sun"]{color:red;} 選擇foo屬性值是sun的所有h1元素
　　子串匹配屬性選取器　　　　　　　h1[foo*="sun"]{color:red;} 選擇foo屬性值以sun開頭的所有h1元素
　　　　　　　　　　　　　　　　　　h1[foo^="sun"]{color:red;} 選擇foo屬性值以sun結尾的所有h1元素
　　　　　　　　　　　　　　　　　　h1[foo$="sun"]{color:red;} 選擇foo屬性值中包含sun的所有h1元素
元素選取器　　　　　 1
　　子項目選取器　　　　　　　　　　h1 > span{color:red;}
　　相鄰兄弟元素選取器　　　　　　　h1 + h1{font-size:20px;}
　　相間兄弟元素選取器      　　　　　 h1 ~ h1{font-size:20px;}
虛擬元素選取器 　　　　 1　　　　　　　p::first-letter{}設定段落p的首字母樣式
　　　　　　　　　　　　　　　　　　 p::first-line{} 設定段落p的首行樣式
　　　　　　　　　　　　　　　　　　 p::before{} p::after{}
　　　　　　　　　　　　　　　　　　 p::selection{}設定被使用者選取部分的樣式