可能是最全最易记的CSS选择器分类大法
可能是最全最易记的CSS选择器分类大法
前言
最近查看了几位同事的代码，发现很多CSS书写习惯都是清一色的类名而没有相应的选择器，层层嵌套的标签都包含至少一个类名。有些同学会问，很多文章都说「选择器」有性能问题，为什么还需要使用「选择器」呢？
是的，「选择器」和「类名」对比起来性能上确实没有后者那么好，但是如今浏览器对于CSS的解析速度已得到大大的提升，完全可忽略「选择器」那丁点的性能问题。有兴趣的同学可自行百度搜索CSS选择器性能的相关问题进行学习。多一个技巧多一份保障！
本文不细说「选择器」的性能问题，先来对选择器做一个功能性的分类。当然，熟悉全部CSS选择器是玩转CSS的最最最最最基本功。本文是玩转CSS的入门讲解，先来把基础搞掂，后续的CSS文章再为大家讲解如何妙用选择器，喜欢CSS并且想玩CSS的可持续关注我哟。
分类
在讲解选择器的奇妙用处之前，还是先把选择器进行分类记忆吧。没错，我就是喜欢总结。由于选择器的标准概念上没有作出明确的分类，以下的分类是为了方便记忆进行整理的，仅供参考不喜勿喷。
❝基础选择器 ❞
选择器 | 别名 | 说明 | 版本 |
|---|---|---|---|
tag | 标签选择器 | 指定类型的标签 | 1 |
#id | ID选择器 | 指定身份的标签 | 1 |
.class | 类选择器 | 指定类名的标签 | 1 |
* | 通配选择器 | 所有类型的标签 | 2 |
❝层次选择器 ❞
选择器 | 别名 | 说明 | 版本 |
|---|---|---|---|
elemP elemC | 后代选择器 | 元素的后代元素 | 1 |
elemP>elemC | 子代选择器 | 元素的子代元素 | 2 |
elem1+elem2 | 相邻同胞选择器 | 元素相邻的同胞元素 | 2 |
elem1~elem2 | 通用同胞选择器 | 元素后面的同胞元素 | 3 |
❝集合选择器 ❞
选择器 | 别名 | 说明 | 版本 |
|---|---|---|---|
elem1,elem2 | 并集选择器 | 多个指定的元素 | 1 |
elem.class | 交集选择器 | 指定类名的元素 | 1 |
❝条件选择器 ❞
选择器 | 说明 | 版本 |
|---|---|---|
:lang | 指定标记语言的元素 | 2 |
:dir() | 指定书写方向的元素 | 4 |
:has | 包含指定元素的元素 | 4 |
:is | 指定条件的元素 | 4 |
:not | 非指定条件的元素 | 4 |
:where | 指定条件的元素 | 4 |
:scope | 指定元素作为参考点 | 4 |
:any-link | 所有包含href的链接元素 | 4 |
:local-link | 所有包含href且属于绝对地址的链接元素 | 4 |
❝行为选择器 ❞
选择器 | 说明 | 版本 |
|---|---|---|
:active | 鼠标激活的元素 | 1 |
:hover | 鼠标悬浮的元素 | 1 |
::selection | 鼠标选中的元素 | 3 |
❝状态选择器 ❞
选择器 | 说明 | 版本 |
|---|---|---|
:target | 当前锚点的元素 | 3 |
:link | 未访问的链接元素 | 1 |
:visited | 已访问的链接元素 | 1 |
:focus | 输入聚焦的表单元素 | 2 |
:required | 输入必填的表单元素 | 3 |
:valid | 输入合法的表单元素 | 3 |
:invalid | 输入非法的表单元素 | 3 |
:in-range | 输入范围以内的表单元素 | 3 |
:out-of-range | 输入范围以外的表单元素 | 3 |
:checked | 选项选中的表单元素 | 3 |
:optional | 选项可选的表单元素 | 3 |
:enabled | 事件启用的表单元素 | 3 |
:disabled | 事件禁用的表单元素 | 3 |
:read-only | 只读的表单元素 | 3 |
:read-write | 可读可写的表单元素 | 3 |
:target-within | 内部锚点元素处于激活状态的元素 | 4 |
:focus-within | 内部表单元素处于聚焦状态的元素 | 4 |
:focus-visible | 输入聚焦的表单元素 | 4 |
:blank | 输入为空的表单元素 | 4 |
:user-invalid | 输入合法的表单元素 | 4 |
:indeterminate | 选项未定的表单元素 | 4 |
:placeholder-shown | 占位显示的表单元素 | 4 |
:current() | 浏览中的元素 | 4 |
:past() | 已浏览的元素 | 4 |
:future() | 未浏览的元素 | 4 |
:playing | 开始播放的媒体元素 | 4 |
:paused | 暂停播放的媒体元素 | 4 |
❝结构选择器 ❞
选择器 | 说明 | 版本 |
|---|---|---|
:root | 文档的根元素 | 3 |
:empty | 无子元素的元素 | 3 |
:first-letter | 元素的首字母 | 1 |
:first-line | 元素的首行 | 1 |
:nth-child(n) | 元素中指定顺序索引的元素 | 3 |
:nth-last-child(n) | 元素中指定逆序索引的元素 | 3 |
:first-child | 元素中为首的元素 | 2 |
:last-child | 元素中为尾的元素 | 3 |
:only-child | 父元素仅有该元素的元素 | 3 |
:nth-of-type(n) | 标签中指定顺序索引的标签 | 3 |
:nth-last-of-type(n) | 标签中指定逆序索引的标签 | 3 |
:first-of-type | 标签中为首的标签 | 3 |
:last-of-type | 标签中为尾标签 | 3 |
:only-of-type | 父元素仅有该标签的标签 | 3 |
❝属性选择器 ❞
选择器 | 说明 | 版本 |
|---|---|---|
[attr] | 指定属性的元素 | 2 |
[attr=val] | 属性等于指定值的元素 | 2 |
[attr*=val] | 属性包含指定值的元素 | 3 |
[attr^=val] | 属性以指定值开头的元素 | 3 |
[attr$=val] | 属性以指定值结尾的元素 | 3 |
[attr~=val] | 属性包含指定值(完整单词)的元素(不推荐使用) | 2 |
[attr\|=val] | 属性以指定值(完整单词)开头的元素(不推荐使用) | 2 |
❝伪元素 ❞
选择器 | 说明 | 版本 |
|---|---|---|
::before | 在元素前插入的内容 | 2 |
::after | 在元素后插入的内容 | 2 |
优势
话说选择器如果没有用处，那W3C还干嘛把它纳入到标准里面呢？选择器的劣势就不多说了，使用不当可能会引起解析性能问题，这个对于现代浏览器来说几乎可忽略，除非你还是IE的忠实粉丝。使用选择器有什么好处呢，我给大家总结一下。
- 对于那些结构与行为分离的写法，使用
Sass/Less书写属性时结构会更加清晰易读 - 减少很多无用或者少用的类名，保持
css文件的整洁性和观赏性，代码也是一门艺术 - 减少修改类名而有可能导致样式失效的问题，有时修改类名没有确保HTML中和CSS中的一致而导致样式失效
- 减少没有实质性使用的类名，例如很多层嵌套的标签，这些标签可能只使用到一个CSS属性，就没有必要建个类名来关联
- 使用选择器可完成很多曾经需要配合JS来完成的交互效果，既可减少代码量也可减少JS对DOM的操作，使得交互效果更流畅
总结
大家可看看我写的这篇接近10万阅读量的文章《灵活运用CSS开发技巧》，点击下方「阅读原文」即可。罗列了66个CSS开发技巧，其中大多数效果是基于选择器实现的，有兴趣的小伙伴可详细查阅代码，了解下选择器的开发技巧和使用场景。
好了，记完这么多选择器，下一篇就来玩CSS选择器了。如果你喜欢CSS，那么赶紧关注下方二维码「IQ前端」，更多的CSS开发技巧敬请期待！
结语
「❤️关注+点赞+收藏+评论+转发❤️」，原创不易，鼓励笔者创作更好的文章
「关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔」