8 个硬核技巧带你迅速提升 CSS 技术<1>

1、神奇的选择器

很多CSS编码习惯都是清一色的类而无相应的选择器,层层嵌套的标签都包含至少一个类。选择器对比起来性能上确实没后者那么好,但如今浏览器对于CSS的解析速度已得到大大的提升,完全可忽略选择器那丁点的性能问题。

可是CSS模块众多,依次推出的选择器也很多。若无特别方法记熟这些选择器对应的功能,也很难将选择器发挥到最大作用。玩转CSS的最关键一步是「能熟悉大部分选择器及其功能与使用场景」

笔者根据选择器的功能划分出八大类,每个类别的选择器都能在一个使用场景中互相组合,记熟这些类别的选择器,相信就能将选择器发挥到最大作用。以下选择器的常用选项里若打勾可强行记熟,这些选择器都是笔者久经沙场而标记出来且认为是最好用的选择器。

基础选择器

选择器别名说明版本常用
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
:link未访问的链接元素1×
:visited已访问的链接元素1×
:target当前锚点的元素3×
: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
: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
::first-letter元素的首字母1×
::first-line元素的首行1×
::selection鼠标选中的元素3×
::backdrop全屏模式的元素4×
::placeholder表单元素的占位4

选择器真正的用处不仅仅是说明选项里的描述,更多是搭配起来能起到的最大作用。这些选择器组成的「选择器系统」是整个CSS体系里的核心,使用选择器能带来以下好处。

  • 「清晰易读」:对于那些结构与行为分离的写法,使用sass/less编写属性时结构会更清晰易读,减少很多无用或少用的类,保持css文件的整洁性和观赏性
  • 「确保一致」:减少修改类而有可能导致样式失效的问题,有时修改类但未确保HTML和CSS的一致而导致样式失效
  • 「剔除累赘」:减少无实质性使用的类,例如很多层嵌套的标签,这些标签可能只使用到一个属性,就没必要新建类关联
  • 「高效流畅」:使用选择器可实现一些看似只能由JS才能实现的效果,既减少代码量也减少JS对DOM的操作,使得交互效果更流畅

待更新。。。

© 版权声明
THE END
喜欢就支持以下吧
点赞4赞赏 分享
吐槽 抢沙发

请登录后发表评论