重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

CSS选择器:伪元素是怎么回事儿?

伪元素
选择器的优先级
选择器的组合
CSS选择器

该思维导图由 AI 生成,仅供参考

你好,我是 winter。
在上一篇文章中,我已经给你介绍了一些简单选择器,这一节课我会继续给你介绍选择器的几个机制:选择器的组合、选择器的优先级和伪元素。

选择器的组合

在 CSS 规则中,选择器部分是一个选择器列表。
选择器列表是用逗号分隔的复杂选择器序列;复杂选择器则是用空格、大于号、波浪线等符号连接的复合选择器;复合选择器则是连写的简单选择器组合。
根据选择器列表的语法,选择器的连接方式可以理解为像四则运算一样有优先级。
第一优先级
无连接符号
第二优先级
“空格”
“~”
“+”
“>”
“||”
第三优先级
“,”
例如以下选择器:
.c,.a>.b.d {
/*......*/
}
我们应该理解为这样的结构。
.c,.a>.b.d
.c
.a>.b.d
.a
.b.d
.b
.d
复合选择器表示简单选择器中“且”的关系,例如,例子中的“ .b.d ”,表示选中的元素必须同时具有 b 和 d 两个 class。
复杂选择器是针对节点关系的选择,它规定了五种连接符号。
“空格”:后代,表示选中所有符合条件的后代节点, 例如“ .a .b ”表示选中所有具有 class 为 a 的后代节点中 class 为 b 的节点。
“>” :子代,表示选中符合条件的子节点,例如“ .a>.b ”表示:选中所有“具有 class 为 a 的子节点中,class 为 b 的节点”。
“~” : 后继,表示选中所有符合条件的后继节点,后继节点即跟当前节点具有同一个父元素,并出现在它之后的节点,例如“ .a~.b ”表示选中所有具有 class 为 a 的后继中,class 为 b 的节点。
“+”:直接后继,表示选中符合条件的直接后继节点,直接后继节点即 nextSlibling。例如 “.a+.b ”表示选中所有具有 class 为 a 的下一个 class 为 b 的节点。
“||”:列选择器,表示选中对应列中符合条件的单元格。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

CSS选择器是网页开发中至关重要的一部分,本文深入介绍了选择器的组合、优先级和伪元素。在选择器的组合部分,详细讲解了选择器列表的语法和连接方式,以及在工程实践中常用的选择器结构。在选择器的优先级部分,解释了复杂选择器的优先级计算方式,并提出了简单原则来使用选择器的建议。文章还提及了伪元素的概念,包括::first-line、::first-letter、::before和::after,展示了它们的用法和效果。伪元素的灵活运用能够满足大部分CSS的使用场景的需求。总的来说,本文内容涵盖了CSS选择器的基本知识和工程实践建议,适合读者快速了解选择器的相关概念和使用技巧。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(24)

  • 最新
  • 精选
  • 德育处主任
    在《css重构》这本书里面建议一般情况下class用来给css提供选择入口,id则为js提供选择入口。尽量不要用js直接修改元素样式,而是通过js修改元素的class从而修改样式。这样能很好的划分样式与逻辑

    作者回复: 前一句我觉得值得商榷,后一句没什么问题。

    2019-06-27
    3
    9
  • o.O君程
    BEM

    作者回复: 那个东西简直不知所云,Block和Element在CSS和DOM语境有特定意义,它这个重新定义非常容易造成混淆。

    2019-11-13
    2
    3
  • Scorpio
    我们团队没有规范。。。
    2019-03-08
    115
  • Levix
    行内属性的优先级永远高于 CSS 规则,浏览器提供了一个“口子”,就是在选择器前加上“!import”。应该是 important 吧
    2019-03-18
    38
  • 阿成
    有两个问题想请教一下winter老师: 1. 您对styled-component类似的方案怎么看 2. 您对使用属性选择器代替class怎么看
    2019-03-07
    13
  • CC
    如果是注重复用的开发,一般采用组件化的形式,给组件一套命名空间; 如果是页面较少的网页开发,不太在意复用和扩展,一般采用 BEM 的规则。 ”根据 id 选单个元素,class 和 class 的组合选择成组元素,tag 选择器确定页面风格。“ 从这个原则中收获很大。
    2019-03-07
    12
  • 靠人品去赢
    我放一个伪类和伪元素的链接吧,这两者属于见过但是没注意更没区分过,估计有人会需要https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
    2019-04-03
    8
  • bradleyzhou
    MDN 上有一个图解优先级的材料 https://specifishity.com/
    2019-05-16
    1
    7
  • 巨龙的力量啊
    遇事不决就!important🤪
    2019-12-05
    1
    5
  • Ranjay
    BEM规范实际上就已经是很好的实践
    2019-03-24
    4
收起评论
显示
设置
留言
24
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部