之前學(xué)的的迷糊了，也不知道什么會(huì)什么不會(huì)了，跑去面試了。別人列出一堆css選擇器，本以為選擇器沒啥的，結(jié)果到那個(gè)多類選擇器翻車了，.a.b選擇同時(shí)含a,b類名的，很尷尬所以回來仔細(xì)整理了一下。目前根據(jù)W3C手冊所知，選擇器一共44個(gè)，特此分類記錄復(fù)習(xí)一下(分類依據(jù)可能不合理，只是為了方便自己記憶)

一.基本選擇器(4個(gè))

選擇器選擇目標(biāo)css

*	通配符,選擇所有元素	2
.class	類選擇器，選擇類名為class的元素	1
#ID	id選擇器，選擇id為ID的元素	1
element	元素選擇器，選擇element元素	1

二.結(jié)合選擇器(6個(gè))

選擇器選擇目標(biāo)css

.a.b	多類選擇器，選擇同時(shí)擁有類名為a,b的元素
a b	后代選擇器 ，選擇a元素后代的所有b元素	1
a,b	同級(jí)選擇器 ，選擇a元素和b元素	1
a>b	子代選擇器，選擇a元素的直接子代b	2
a+b	直接相鄰兄弟選擇器，選擇緊跟著a元素的b元素	2
a~b	通用兄弟選擇器，選擇前面有a的所有b元素	3

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

三.偽元素(4個(gè))

選擇器選擇目標(biāo)css

:first-letter	選擇首字	1
:first-line	選擇首行	1
:before	在元素之前插入	2
:after	在元素之后插入	2

注意事項(xiàng): 1. 所有偽元素都必須放在該偽元素選擇器的最后面 2. 偽元素是一種假想的元素，插入到頁面中代替某個(gè)元素但是并不出現(xiàn)在文檔源代碼中，由用戶代理動(dòng)態(tài)構(gòu)建。

四.屬性選擇器(7個(gè))

選擇器選擇目標(biāo)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結(jié)尾的元素	3

五.偽類(23個(gè))

表單相關(guān)(3)

選擇器選擇目標(biāo)css

:checked	選中的input元素	3
:disabled	選中禁用的input元素	3
:enabled	選中啟用的input元素	3

超鏈接相關(guān),love-focus-hate.(5)

選擇器選擇目標(biāo)css

:link	未被訪問的連接	3
:visited	已經(jīng)被訪問的連接	3
:focus	獲取焦點(diǎn)的元素	3
:hover	鼠標(biāo)懸浮的元素	3
:actived	活動(dòng)的元素	3

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

選擇器選擇目標(biāo)css

p:only-child	選擇其父元素下的唯一子元素p下的所有元素	3
p:only-of-type	選擇屬于其父元素唯一的 p元素的每個(gè) p元素	3
p:first-of-type	選擇屬于其父元素的首個(gè)p 元素的每個(gè) p 元素。	3
p:last-of-type	選擇屬于其父元素的最后 p元素的每個(gè) p元素	3
p:nth-child(n)	選擇屬于其父元素的第n個(gè)子元素的每個(gè) p 元素 (n從1開始)	3
p:nth-last-child(n)	從最后一個(gè)子元素開始計(jì)數(shù)	3
p:nth-of-type(n)	選擇屬于其父元素第n個(gè)p元素的每個(gè)p元素	3
p:nth-last-of-type(n)	從最后一個(gè)元素開始計(jì)數(shù)	3
p:last-child	選擇屬于其父元素最后一個(gè)子元素每個(gè)p元素	3

其它(6)

選擇器選擇目標(biāo)css

:root	選擇文檔根元素	3
:lang(language)	選擇帶有以 "language" 開頭的 lang 屬性值的元素	2
:empty	選擇沒有子元素的元素(包括文本節(jié)點(diǎn))	3
:target	選擇當(dāng)前活動(dòng)的元素，錨點(diǎn)指向的元素	3
:not(selector)	選擇非某個(gè)元素的所有元素	3
::selection	選擇被用戶選取的元素部分	3

六.CSS權(quán)重

• 最高級(jí)別!important
• 行內(nèi)式 1000
• ID選擇器 100
• 類選擇器、偽類、屬性選擇器 10
• 元素選擇器、偽元素 1
• 其它為0

轉(zhuǎn)載于:https://www.cnblogs.com/zming-hua/p/7577331.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。