我對CSS選擇器的認識

一、簡述　　

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

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

關系選擇器——根據元素與其他元素的關系進行篩選，比如子元素、兄弟元素等；

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

　　我做了一個項目，里面包含一個測試CSS選擇器的小功能，請看這里。

二、歸納

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

　　1. 特征選擇器：

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

　　2. 關系選擇器

描述	選擇器	備注
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) { }?	?

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

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=h1h2cib&title=我對CSS選擇器的認識

總結

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

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