专栏首页JowayYoung谈前端可能是最全最易记的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开发技巧的前端公众号,更多前端小干货等着你喔」

本文分享自微信公众号 - IQ前端(gh_4593b39979fb),作者:JowayYoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 以小白的角度解读Koa源码

    使用Koa已有一段时间,为什么会从Express转向Koa呢,那还是得从Express上说起。对于服务端的Web框架来说,Express更为贴近「Web Fra...

    JowayYoung
  • 嗯,手搓一个TinyPng压缩图片的WebpackPlugin也SoEasy啦

    曾经发表过一篇性能优化的文章《前端性能优化指南》,笔者总结了一些在项目开发过程中使用过的性能优化经验。说句真话,性能优化可能在面试过程中会有用,实际在项目开发过...

    JowayYoung
  • 精选MAC应用推荐,让你搬砖效率翻倍!

    最近看到的一段话很有感触,日复一日的低效率工作只会消磨你的热情,而巨大的时间成本会让你错失很多机会。

    JowayYoung
  • css 总结1 原

    1、@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属...

    tianyawhl
  • 前端之 CSS 知识点回顾

    <p>标签内的文字的颜色是red,优先级相等的时候与文件中样式定义的先后顺序有关,即是后面的覆盖前面的,与在class定义中的先后关系无关。

    IT技术小咖
  • 前端开发,关键技术点杂烩

    缓存:ETag Expire Last-Modified 三者合用,Expire 可以让浏览器完全不发起 Http 请求,若 F5 发起请求,也可以通过判断 E...

    用户5997198
  • 前端关键技术点杂烩,这些你必须知道

    这里总结一下 WEB 前端面试的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌...

    用户5997198
  • 通过 DCOM 的 ShellWindows & ShellBrowserWindow 进行横向渗透

    这个系列的文章翻译由信安之路红蓝对抗小组的所有成员共同完成,后续将陆续发布,敬请期待!

    信安之路
  • jmeter读取csv文件

    互联网金融打杂

扫码关注云+社区

领取腾讯云代金券