可能是最全最易记的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开发技巧敬请期待!


简介:主人有点忙,还没来得及写简介~
(0)
打赏 喜欢就点个赞支持下吧 喜欢就点个赞支持下吧
网站客服
网站客服
内容投稿 侵权处理
分享本页
返回顶部