我對(duì)CSS選擇器的認(rèn)識(shí)

一、簡述　　

　　CSS選擇器是對(duì)HTML元素進(jìn)行選擇的篩選條件，大概可以分為兩類：

特征選擇器——根據(jù)元素自身所具有的某種特征進(jìn)行篩選，比如名稱、ID、屬性等；

關(guān)系選擇器——根據(jù)元素與其他元素的關(guān)系進(jìn)行篩選，比如子元素、兄弟元素等；

　　在真正使用的時(shí)候，幾個(gè)簡單的選擇器可以組合成更復(fù)雜的選擇器，所以誰也說不上CSS選擇器有多少。還有兩個(gè)選擇器是功能性的，它們可以給元素已有內(nèi)容之前或之后添加新內(nèi)容。　

　　我做了一個(gè)項(xiàng)目，里面包含一個(gè)測試CSS選擇器的小功能，請(qǐng)看這里。

二、歸納

　　下文中所有的?SELECTOR?都代表任何一個(gè)有效的選擇器。

　　1. 特征選擇器：

描述	選擇器	備注
1. 無論有什么特征——即全部	?* { }?	?
2. 元素名稱是 "element"	?element { }?	?
3.?具有類名 "className"	?.className { }?	?
4.?具有id名 "someID"	?#someID { }?	?
5.?帶有屬性? attr	?SELECTOR[attr] { }?	?
6.?帶有屬性 attr，且屬性值為 "value"	?SELECTOR[attr="value"] { }?	?
7. 帶有屬性 attr，且其若干個(gè)屬性值中有一個(gè)是 "value"	?SELECTOR[attr~="value"] { }?	?
8. 帶有屬性 attr，且其屬性值包含字符串 "str"	?SELECTOR[attr*="str"] { }?	?
9. 鼠標(biāo)正位于其上方	?SELECTOR:hover { }?	?
10. SELECTOR 是個(gè)獨(dú)生子——它的父元素只有它這一個(gè)子元素	?SELECTOR:only-child { }?	?
11. SELECTOR 是其父親的第一個(gè)子元素	?selector:first-child { }?	?
12.?SELECTOR 是其父親的第 N 個(gè)子元素	?selector:nth-child(N) { }?	?
13.?SELECTOR 是其父親的最后一個(gè)子元素	?selector:last-child { }?	?
14. SELECTOR 內(nèi)部是真空——連空格都沒有	?SELECTOR:empty { }?	?
15. SELECTOR 被某個(gè)鏈接錨定了，而且該鏈接被點(diǎn)擊了	?SELECTOR:target { }?	<a href="#topic">跳轉(zhuǎn)到 SELECTOR 處</a>
16. SELECTOR 中被用戶通過鼠標(biāo)拖動(dòng)選中的內(nèi)容	?SELECTOR::selection { }?	?
鏈接專有的特征
17. 未被訪問的鏈接	?a:link { }?	?
18. 已被訪問的鏈接	?a:visited { }?	?
19. 正在被點(diǎn)擊的鏈接	?a:active { }?	?
表格元素專有的特征
20. 目標(biāo)是啟用的	?SELECTOR:enabled { }?	?
21. 目標(biāo)是禁用的	?SELECTOR:disabled?{ }?	?
22. 目標(biāo)是被選中的（單選框、復(fù)選框）	?SELECTOR:checked?{ }?	?
23. 目標(biāo)獲得了焦點(diǎn)	?SELECTOR:focus { }?	能接收用戶輸入的元素，當(dāng)它正在接收時(shí)，就獲得了焦點(diǎn)。
兩個(gè)功能性選擇器
24. 給 SELECTOR 的內(nèi)容之前加上些東西	?SELECTOR:before { }?	?
25.?給 SELECTOR 內(nèi)容之后加上些東西	?SELECTOR:after { }?	?

　　2. 關(guān)系選擇器

描述	選擇器	備注
1. SELECTOR1 和 SELECTOR2	?SELECTOR1, SELECTOR2 { }?	?
2.?位于 SELECTOR1 之后的所有兄弟元素 SELECTOR2	?SELECTOR1~SELECTOR2 { }?	?
3.?與 SELECTOR1 緊鄰著的 SELECTOR2 元素	?selector1 selector2 { }?	?
4.?SELECTOR 的首字母	?selector:first-letter { }?	類似的還有??SELECTOR:first-line { }?
5.?SELECTOR1 的所有子元素 SELECTOR2	?selector1>selector2 { }?	?
6.?SELECTOR1 的所有后代元素 SELECTOR2	?selector1 selector2 { }?	?
7. 所有不是 SELECTOR2 的 SELECTOR1	?SELECTOR1:not(SELECTOR2) { }?	?

　　個(gè)人淺薄之見，肯定有不到之處，希望得到有心之人指正，謝謝！

本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=h1h2cib&title=我對(duì)CSS選擇器的認(rèn)識(shí)

總結(jié)

以上是生活随笔為你收集整理的我对CSS选择器的认识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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