::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. Solution -「洛谷 P5325」Min_25 筛

    \(\mathcal{Description}\)   Link.   对于积性函数 \(f(x)\),有 \(f(p^k)=p^k(p^k-1)~(p\in\mathbb P,k\in\mathbb ...

  2. java中的代码块(初始化块)

    介绍 代码块又叫初始化块,属于类中的成员,类似于方法,将逻辑语句封装在方法体中,通过{ } 包围起来,但和方法不同,没有方法名,没有返回值,没有参数,只有方法体,而且不通过对象或类显示调用,而是加载类 ...

  3. DubboSPI机制二之Dubbo中SPI初体验

    Dubbo高级之一SPI机制之JDK中的SPI - 池塘里洗澡的鸭子 - 博客园 (cnblogs.com)中阐述了JDK标准的SPI,并对其应用做了相应的实践.在实际应用中,很多框架都会对其进行扩展 ...

  4. 关于TP90 TP99 等常用于评估软件系统的处理性能的指标概念

    工作中还是蛮少直接接触到评估系统性能的,但是不妨碍有兴趣了解.认为这是常识,只是个人才疏学浅不了解其定义. TP=Top Percentile,Top百分数,是一个统计学里的术语,与平均数.中位数都是 ...

  5. Java老码农心得：卷了这么多年，您真的卷会了吗？

    前言 大家好,我是福隆苑居士,今天跟大家聊一下程序员在当下内卷成风的情况下,使用什么方法可以了解行业发展趋势,知道哪些该学,哪些可以略过,今年应该掌握什么,可以放弃什么,让自己时刻紧跟行业的步伐永不掉 ...

  6. IDEA2019.2.2激活码，亲测可用

    3AGXEJXFK9-eyJsaWNlbnNlSWQiOiIzQUdYRUpYRks5IiwibGljZW5zZWVOYW1lIjoiaHR0cHM6Ly96aGlsZS5pbyIsImFzc2lnb ...

  7. HTTP攻击与防范-跨站攻击-01简介

    实验目的 1.掌握WEB渗透测试跨站攻击原理 2.了解WEB站点的跨站攻击脆弱性 3.修复存在跨站攻击可能的漏洞 实验原理 XSS又叫CSS (Cross Site script) ,跨站脚本攻击.它 ...

  8. FPGA+x86构建高性能国产网络测试仪竞技之道

    众所周知,以太网已经深入我们的生活无处不在,企业.校园.大数据中心和家庭等都离不开网络,否则我们的生活将受到严重的影响. 以太网的接口速率也是迅速发展:10M.100M.GE.10GE.40GE.10 ...

  9. Telnet拓展测试--在生产测试场景的应用

    本文关键词:流量测试.Telnet拓展测试.TCP/IP.时延 一.Telnet简介 Telnet协议是TCP/IP协议族中的一员,是Internet远程登录服务的标准协议和主要方式.它为用户提供了在 ...

  10. 【CPU】进程管理之五状态模型

    本文为第三篇,进程管理之五状态模型,进程在操作系统里边是有多个状态的,本文就是了解进程在操作系统中的多个状态 1.进程的五个状态 创建状态 就绪状态 阻塞状态 执行状态 终止状态 2.进程处于这五种状 ...