易记的css选择器分类大法

css 专栏收录该内容
1 篇文章 0 订阅

选择器分类

基础选择器

选择器别名说明版本
tag标签选择器指定类型的标签1
#idID选择器指定身份的标签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

使用选择器的优势

  • 对于那些结构与行为分离的写法,使用Sass/Less书写属性时结构会更加清晰易读
  • 减少很多无用或着少用的类名,保持css文件的整洁性和观赏性,代码也是一门艺术
  • 减少修改类名而有可能导致样式失效的问题,有时修改类名没有确保HTML中和CSS中的一致而导致样式失效
  • 减少没有实质性使用的类名,例如很多层嵌套的标签,这些标签可能只使用到一个CSS属性,就没有必要建个类名来关联
  • 使用选择器可完成很多曾经需要配合JS来完成的交互效果,既可减少代码量也可减少JS对DOM的操作,使得交互效果更流畅

css选择器性能

此外,使用css选择器时,需注意性能:

CSS选择器匹配规则

CSS选择器从右向左的匹配规则

浏览器样式匹配规则主要分四个类别

  • ID 规则,这第一个类别包含了那些将 ID 选择器作为关键选择器的规则
  • Class 规则,如果一个规则将一个 class 明确作为它的关键选择器,那么它就属于该类别
  • 标签规则,如果一条规则将一个标签作为它的关键选择器,那么这条规则就属于该类别
  • 通用规则,不属于上面那些类别的规则都属于这个类别

内容来源参考:

  1. 可能是最全最易记的CSS选择器分类大法
  2. CSS选择器性能分析
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值