重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

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

winter 2019-03-07
你好,我是 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/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(15)

  • Scorpio
    我们团队没有规范。。。
    2019-03-08
    43
  • Lcina
    行内属性的优先级永远高于 CSS 规则,浏览器提供了一个“口子”,就是在选择器前加上“!import”。应该是 important 吧
    2019-03-18
    14
  • 阿成
    有两个问题想请教一下winter老师:
    1. 您对styled-component类似的方案怎么看
    2. 您对使用属性选择器代替class怎么看
    2019-03-07
    10
  • CC
    如果是注重复用的开发,一般采用组件化的形式,给组件一套命名空间;

    如果是页面较少的网页开发,不太在意复用和扩展,一般采用 BEM 的规则。

    ”根据 id 选单个元素,class 和 class 的组合选择成组元素,tag 选择器确定页面风格。“ 从这个原则中收获很大。
    2019-03-07
    6
  • 矫健的胖虎
    在《css重构》这本书里面建议一般情况下class用来给css提供选择入口,id则为js提供选择入口。尽量不要用js直接修改元素样式,而是通过js修改元素的class从而修改样式。这样能很好的划分样式与逻辑

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

    2019-06-27
    4
  • 阿歡。
    老师您好,下面例子中 把<br>去掉,会变成First paragraph为绿色,Second paragraph为蓝色,这是为何?
    <div>
                <span id="a">First paragraph</span><br>
                <span>Second paragraph</span>
     </div>

               div>span#a {
                    color:green;
                }
                div::first-line {
                    color:blue;
                }
    2019-03-13
    1
    4
  • 靠人品去赢
    我放一个伪类和伪元素的链接吧,这两者属于见过但是没注意更没区分过,估计有人会需要https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
    2019-04-03
    3
  • Ranjay
    BEM规范实际上就已经是很好的实践
    2019-03-24
    2
  • o.O君程
    BEM

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

    2019-11-13
    1
  • bradleyzhou
    MDN 上有一个图解优先级的材料 https://specifishity.com/
    2019-05-16
    1
  • qqq
    提醒下:伪元素那部分说的是子元素 color 覆盖父元素 color,而非 CSS 规则覆盖
    2019-03-22
    1
  • Geek_8c1d64
    img、br等不能包含子元素的标签不能创建::before和::after。但一个例外是hr,不知道为什么。或许是我的理解有问题?
    2019-03-07
    1
  • 巨龙的力量啊
    遇事不决就!important🤪
    2019-12-05
  • 旅途。👣👣
    评论亦精彩
    2019-05-09
  • 空山鸟语
    选择器的优先级那块,是不是还缺 属性选择器?
     比如 input[type=text] 等
    2019-04-17
    1
收起评论
15
返回
顶部