标题:::before 和:after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用?

相关知识点:

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前,使用::before,否者,使用::after;

在代码顺序上,::after生成的内容也比::before生成的内容靠后。

如果按堆栈视角,::after生成的内容会在::before生成的内容之上。

回答:

在css3中使用单冒号来表示伪类,用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法,在一些浏览器中也可以使用单冒号来表示伪元素。

伪类一般匹配的是元素的一些特殊状态,如hover、link等,而伪元素一般匹配的特殊的位置,比如after、before等。

html语言中的双冒号,::before 和:after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用...相关推荐

  1. ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用?

    ::before 和 :after中双冒号和单冒号的区别以及2个伪元素的作用 ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用 实例 实例 ::before 和 ...

  2. IE8中伪元素动态作用样式不重绘bug记录

    前阵子对公司框架的前端优化中,使用了字体图标(iconfont)来做模块的图标集,供用户进行配置选择. 字体图标的有非常好的灵活性和复用性,可以像处理文字一样通过font-size进行大小设置.通过c ...

  3. 了解css中伪元素 before和after的用法

    层叠样式表(CSS)主要用于将样式应用于HTML标签,但是在某些情况下,向文档添加额外标签元素是多余的或不可能的,CSS中实际上有一个特性允许我们在不中断实际文档的情况下添加额外标签,即伪元素. 你听 ...

  4. html 伪元素放入标签,CSS中的before和:after伪元素使用详解

    如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...

  5. CSS中伪元素、伪类选择器和字体、文本相关属性

    CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...

  6. html语言中的双冒号,css单冒号和双冒号用法和区别

    最近突然被别人问起css单冒号和双冒号有什么区别,答曰:"不知道". 虽然还在填坑中,但作为一个跨过了初级的FEer,感觉着实汗颜,刚好今天下午在搜别的问题的时候,突然看到一个对比 ...

  7. R语言使用aov函数进行双因素方差分析(Two-way factorial ANOVA)、使用HH包中的interaction2wt函数为任何阶的双因素方差分析可视化主效应和交互作用图、箱图显示主效应

    R语言使用aov函数进行双因素方差分析(Two-way factorial ANOVA).使用HH包中的interaction2wt函数为任何阶的双因素方差分析可视化主效应和交互作用图(Main ef ...

  8. html中两个冒号,css中双冒号和单冒号区别

    :--是指的伪类 ::--是指的伪元素 1.字面意思: 伪类,1.css中有类选择器,某些元素并未定义类名,就可以通过伪类赋予样式,如:[:nth-child(n)]:2.伪类可以应用于元素执行某种状 ...

  9. java lambda 两个冒号_java lambda 表达式中的双冒号的用法说明 ::

    双冒号运算就是java中的[方法引用],[方法引用]的格式是 类名::方法名 注意是方法名哦,后面没有括号"()"哒.为啥不要括号,因为这样的是式子并不代表一定会调用这个方法.这种 ...

最新文章

  1. 谷歌「模型汤」靠微调屠了ImageNet的榜!方法竟然只有半页纸
  2. ECCV 2020最佳论文讲了啥?作者为ImageNet一作、李飞飞高徒邓嘉
  3. javascript 初学对象
  4. 杭电 1711 Number Sequence 1686 2203
  5. 关于多边形内点数问题的一些变形
  6. 第八周项目实践1 建立顺序串的算法库
  7. Wix 安装部署教程(十六) -- 自动生成多语言文件
  8. 论述类文本知识框架_考前知识梳理与答题技巧之论述类文本
  9. 数据操作语言DML及数据定义语言DDL的区别
  10. D. Beautiful numbers
  11. 解决filezilla中无法显示中文的文件名
  12. 产品配件类目税目分类_2018商品和服务税收分类编码表
  13. 基于Matlab数字图像处理微表情情绪识别系统
  14. ~0 为什么等于 -1 ,在C语言中?
  15. 互金舆情精选-2019/1/31
  16. Python爬取两个城市之间的直线距离
  17. boolean的由来及使用
  18. 漏斗周期漏斗数据关联优化
  19. 涉密学位论文不得在联网的计算机上撰写,华南理工大学涉密学位论文管理暂行规定.doc...
  20. 计算机网络【标准化工作及其组织】

热门文章

  1. 软件工程十——软件质量管理
  2. 吉林大学 超星慕课 高级语言程序设计 实验09 动态数据组织(2022级)
  3. 别在画什么折线图了,教你几种酷炫可视化方法,这个不香嘛?
  4. Android 仿懒人听书的一个效果
  5. 2021寒假每日一题《数列》
  6. 高通data分区修改
  7. 人工智能6个核心技术
  8. 根据文字生成头像(类似钉钉头像) 分享一个好用的头像生成API--UI Avatars
  9. MFC错误 error RC2108: expected numerical dialog constant
  10. 日常使用计算机过程中发现的中断,2010年会计从业考试《初级电算化》章节习题及答案(5)...