我对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) { } |
个人浅薄之见，肯定有不到之处，希望得到有心之人指正，谢谢！
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
