之前學的的迷糊了，也不知道什么會什么不會了，跑去面試了。別人列出一堆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

轉載于:https://www.cnblogs.com/zming-hua/p/7577331.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的一个容易被忽视的css选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。