::before和:after中的的双冒号和单冒号有什么区别及这两个伪元素的作用

  • 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素（伪元素由双冒号和伪元素名称组成），为了兼容已有的伪元素写法，在一些浏览器中也可以使用单冒号，来表示伪元素，比如:first-line、:first-letter、:before、:after等。
  • 在新的CSS3中引入的伪元素不允许再支持旧的单冒号是写法
  • 想让插入的内容出现在其它内容前，使用::before，反之使用::after，在代码顺序上，::after生成的内容也比::before生成的内容靠后

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

::before和:after中的的双冒号和单冒号有什么区别及这两个伪元素的作用的更多相关文章

  1. ::before 和 :after 中双冒号和单冒号有什么区别？

    在 CSS 中伪类一直用 : 表示,如 :hover, :active 等 伪元素在CSS1中已存在,当时语法是用 : 表示,如 :before 和 :after 后来在CSS3中修订,伪元素用 :: ...

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

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

  3. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  4. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  5. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  6. 如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...

  7. WPF中的事件及冒泡事件和隧道事件的区别

    WPF中的事件及冒泡事件和隧道事件的区别 冒泡事件表示事件从元素树向上到达根元素.这样您就可以在源元素的上方层级对象处理事件.例如,您可向嵌入的 Grid 元素附加一个 Button.Click 处理 ...

  8. 关于css3中before与after用单冒号还是双冒号的疑虑

    在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写.

  9. css中的单冒号和双冒号

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

随机推荐

  1. DDD-领域驱动设计简谈

    看到网上讨论 DDD 的文章越来越多,咱也不能甘于人后啊,以下是我对 DDD 的个人理解,短小精悍,不喜忽喷. 也谈DDD(领域驱动设计) 解决什么问题 传统模式,产品评审结束,开发人员就凭经验拆分模 ...

  2. iOS 通知扩展插件

    iOS 通知扩展插件 目录 iOS 通知扩展插件 Notification Service Extension 新建一个target 代码实现 注意事项 UINotificationConentExt ...

  3. ISISv4协议测试——网络测试仪实操

    文章关键词 ISIS协议:路由协议:协议测试: 一.文章简介: isis是一种与ospf很相似的网络协议(属于动态路由协议),它被应用在巨大规模网络,如运营商以及银行等.同样的它也是基于链路状态算法, ...

  4. 完爆Excel！一个令人惊艳的数据展示工具，让你做图更轻松高效

    数据展示应该是最常见的需求,我们经常利用数据做总结.用数据做分享.但是我们该如何更好地展示给我们需要展示的人,如何才能让我们的数据表达更加动人,这个值得让人思索. 说到数据表达,常用的数据展示方式无非 ...

  5. 帆软和思迈特软件Smartbi产品的详细对比

    一.设计模式上 (1)finereport V10.0需要下载一个600M的设计器,采用类excel的设计模式,打开时间有20S,反复测试几次,基本都在20多秒.(测试电脑core I5 4核8G). ...

  6. Python：numpy.ma模块

    翻译总结自:The numpy.ma module - NumPy v1.21 Manual 前言 ma是Mask的缩写,关于Mask的解释,如果有PS的基础,可以理解为蒙版,如果有计算机网络的基础, ...

  7. Qt：QUrl构造时的qrc前缀

    参考(按对我帮助从大到小排列): Qt内的各种路径(让人迷惑) - 鬼谷子com - 博客园 qt webengineview 加载本地资源方式 - beautifulday - 博客园 (17条消息 ...

  8. WPF优秀组件推荐之Stylet（二）

    上一篇文章介绍了Stylet的一些基本功能,本篇将介绍一些深入一点的功能. 依赖注入 在Bootstrapper 类中注入需要的对象: public class Bootstrapper : Boot ...

  9. LeetCode-086-分隔链表

    分隔链表 题目描述:给你一个链表的头节点 head 和一个特定值 x ,请你对链表进行分隔,使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前. 你应当 保留 两个分区中每个节点的初始相对 ...

  10. 面试官：Redis中有序集合的内部实现方式是什么？

    面试官:Redis中基本的数据类型有哪些? 我:Redis的基本数据类型有:字符串(string).哈希(hash).列表(list).集合(set).有序集合(zset). 面试官:有序集合的内部实 ...