::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. python好用的函数或对象

    1.ljust.rjust "hello".ljust(10,"x") #将字符串hello做对齐,并且用字符'x'补到10个字符 #输出为:helloxxxx ...

  2. 图解AI数学基础 | 概率与统计

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/83 本文地址:http://www.showmeai.tech/article-det ...

  3. 前端点击png透明部分解决方案

    看效果:点击空白区域红色1.点击实体区域红色2.分别得到颜色数据(包括透明度数据),控制台蓝色1.2.根据颜色数据即可解决png透明部分的点击问题. 让图片不能点击,分两种 1. 整张图片不能点击.这 ...

  4. 【基础篇】js对本地文件增删改查--查

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  5. ensp上防火墙的实现

    使用ensp模拟器中的防火墙(USG6000V)配置NAT(网页版)一.NAT介绍NAT(Network Address Translation,网络地址转换):简单来说就是将内部私有地址转换成公网地 ...

  6. [theHunterCOTW] 猎人荒野的召唤-一点资料

    游戏介绍 购买建议 [2020-12-17] theHunter 现在有三个捆绑包 2019 Edition,2021 Edition,Complete Collection 单独购买,目前steam ...

  7. Smartbi扩展性怎么样，是否方便扩展开发产品已有功能？

    Smartbi大数据分析工具具有很强的扩展性,通过"稳定内核+API扩展"的架构,通过报表插件扩展的方式,能满足很多应用项目的定制化需求,把新功能无缝集成到系统中. Smartbi ...

  8. 重点收藏！BI数据分析工具哪家强？

    信息爆炸时代,大数据晋升为一个时髦词汇.不论是在哪个行业领域,大数据分析成为各企业备受推崇的决策工具.对于海量数据的挖掘,有助于统计事情发生的概率,帮助人们计算做某些事情成功的几率.企业正在数据的海洋 ...

  9. 太骚了，用Excel玩机器学习

    最近发现了一个好玩的Python库,它可以将训练好的机器学习模型转换为Java.C.JavaScript.Go.Ruby,VBA 本地代码,可以让连Python和机器学习一无所知的同学也能感受预测的神 ...

  10. 接口java.util.Map的四个实现类HashMap Hashtable LinkedHashMap TreeMap

    java中HashMap,LinkedHashMap,TreeMap,HashTable的区别 :java为数据结构中的映射定义了一个接口java.util.Map;它有四个实现类,分别是HashMa ...