一個容易被忽視的css選擇器

以前學的的迷糊了，也不知道什麼會什麼不會了，跑去面試了。別人列出一堆css選擇器，本覺得選擇器沒啥的，結果到那個多類選擇器翻車了，.a.b選擇同時含a,b類名的，很尷尬因此回來仔細整理了一下。目前根據W3C手冊所知，選擇器一共44個，特此分類記錄複習一下(分類依據可能不合理，只是爲了方便本身記憶)

一.基本選擇器(4個)

選擇器	選擇目標	css
*	通配符,選擇全部元素	2
.class	類選擇器，選擇類名爲class的元素	1
#ID	id選擇器，選擇id爲ID的元素	1
element	元素選擇器，選擇element元素	1

二.結合選擇器(6個)

選擇器	選擇目標	css
.a.b	多類選擇器，選擇同時擁有類名爲a,b的元素
a b	後代選擇器 ，選擇a元素後代的全部b元素	1
a,b	同級選擇器 ，選擇a元素和b元素	1
a>b	子代選擇器，選擇a元素的直接子代b	2
a+b	直接相鄰兄弟選擇器，選擇緊跟着a元素的b元素	2
a~b	通用兄弟選擇器，選擇前面有a的全部b元素	3

注意事項: 1. 相鄰兄弟選擇器，之間能夠有文本元素，不影響，其它不可。2.在 IE7 以前的版本中，不一樣平臺的 Internet Explorer 都不能正確地處理多類選擇器。

三.僞元素(4個)

選擇器	選擇目標	css
:first-letter	選擇首字	1
:first-line	選擇首行	1
:before	在元素以前插入	2
:after	在元素以後插入	2

注意事項: 1. 全部僞元素都必須放在該僞元素選擇器的最後面 2. 僞元素是一種假想的元素，插入到頁面中代替某個元素可是並不出如今文檔源代碼中，由用戶代理動態構建。

四.屬性選擇器(7個)

選擇器	選擇目標	css
[attr]	簡單屬性選擇器，選擇含有attr屬性的元素	2
[attr=value]	具體值屬性選擇器，選擇attr屬性值等於value的元素	2
[attr~=value]	選擇attr屬性中含有value詞條的元素	2
[attr|=value]	選擇attr屬性以value-開頭，或者等於value的元素	2
[attr*=value]	子串匹配，選擇attr屬性子串包含value的全部元素	3
[attr^=value]	選擇attr屬性以value開頭的元素	3
[attr$=value]	選擇attr屬性以value結尾的元素	3

五.僞類(23個)

表單相關(3)

選擇器	選擇目標	css
:checked	選中的input元素	3
:disabled	選中禁用的input元素	3
:enabled	選中啓用的input元素	3

超連接相關,love-focus-hate.(5)

選擇器	選擇目標	css
:link	未被訪問的鏈接	3
:visited	已經被訪問的鏈接	3
:focus	獲取焦點的元素	3
:hover	鼠標懸浮的元素	3
:actived	活動的元素	3

同一父元素下的目標選擇(9)

選擇器	選擇目標	css
p:only-child	選擇其父元素下的惟一子元素p下的全部元素	3
p:only-of-type	選擇屬於其父元素惟一的 p元素的每一個 p元素	3
p:first-of-type	選擇屬於其父元素的首個p 元素的每一個 p 元素。	3
p:last-of-type	選擇屬於其父元素的最後 p元素的每一個 p元素	3
p:nth-child(n)	選擇屬於其父元素的第n個子元素的每一個 p 元素 (n從1開始)	3
p:nth-last-child(n)	從最後一個子元素開始計數	3
p:nth-of-type(n)	選擇屬於其父元素第n個p元素的每一個p元素	3
p:nth-last-of-type(n)	從最後一個元素開始計數	3
p:last-child	選擇屬於其父元素最後一個子元素每一個p元素	3

其它(6)

選擇器	選擇目標	css
:root	選擇文檔根元素	3
:lang(language)	選擇帶有以 "language" 開頭的 lang 屬性值的元素	2
:empty	選擇沒有子元素的元素(包括文本節點)	3
:target	選擇當前活動的元素，錨點指向的元素	3
:not(selector)	選擇非某個元素的全部元素	3
::selection	選擇被用戶選取的元素部分	3

六.CSS權重

• 最高級別!important
• 行內式 1000
• ID選擇器 100
• 類選擇器、僞類、屬性選擇器 10
• 元素選擇器、僞元素 1
• 其它爲0