我對CSS選擇器的認識 一、簡述 CSS選擇器是對HTML元素進行選擇的篩選條件，大概可以分為兩類： 在真正使用的時候，幾個簡單的選擇器可以組合成更複雜的選擇器，所以誰也說不上CSS選擇器有多少。還有兩個選擇器是功能性的，它們可以給元素已有內容之前或之後添加新內容。 我做了一個項目，裡面包含一個測試 ...
我對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) { } |
個人淺薄之見，肯定有不到之處，希望得到有心之人指正，謝謝！
