::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. 我来教你如何将cpu使用率up起来(shell脚本[含注释])

    这个脚本是为了逃过一些资源检测的,当一些机器当前使用率偏低,会被客户要求收回,那咋办呢?使用下面的脚本,就可以留住你的机器了 假设要求cpu使用率不能低于35% 使用方法:bash up_up_up. ...

  2. 网页外部注入vConsole调试

      概要 本篇介绍一种十分方便的方法为网站添加 vConsole 调试(通过篡改请求外部注入的方式,不需要您是网站的拥有者,主要用于调试线上站点). 之前已经发过一篇<借助FreeHttp为任意 ...

  3. base家族在线解密工具

    http://www.atoolbox.net/Tool.php?Id=934 https://ctf.bugku.com/tools

  4. 绘制地图其实并不难!如何绘制地图?看看Smartbi的制作方法

    数据地图是一种图形化的数据资产管理工具,它提供了多层次的图形化展现,并具备各种力度的控制能力,满足业务使用.数据管理.开发运维不同应用场景的图形查询和辅助分析需求.长期以来,很多职场人士都希望能在自己 ...

  5. MySQL让人又爱又恨的多表查询

    1. 前言 在SQL开发当中,多表联查是绝对绕不开的一种技能.同样的查询结果不同的写法其运行效率也是千差万别. 在实际开发当中,我见过(好像还写过~)不少又长又臭的查询SQL,数据量一上来查个十几分钟 ...

  6. Oracle导出/导入数据方法--两种方法(pde格式/dmp格式)

    转至:https://www.cnblogs.com/houbxblogs/articles/13365557.html?ivk_sa=1024320u 1.导出数据方法一(pde格式) 工具→ 导出 ...

  7. AtCoder Beginner Contest 242 题解

    目录 C - 1111gal password D - ABC Transform E - (∀x∀) F - Black and White Rooks G - Range Pairing Quer ...

  8. 使用kind快速搭建本地k8s集群

    Kind是什么? k8s集群的组成比较复杂,如果纯手工部署的话易出错且时间成本高.而本文介绍的Kind工具,能够快速的建立起可用的k8s集群,降低初学者的学习门槛. Kind是Kubernetes I ...

  9. SQL:查询时给表起别名

    Q 有两个表student.score,查询前一个表的id.name列,后一个表的total列,查询结果通过两个表的id连接起来 要求 使用别名st和sc替换表名进行查询 A SELECT st.id ...

  10. Python:glob

    学习自: (1)Python标准库glob模块_lianghe77的博客-CSDN博客_glob库 (2)Python:glob与os.listdir_鳄鱼的博客-CSDN博客 (3)python文件 ...