::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. v77.01 鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc(上)进程通讯内容 | 新的一年祝大家生龙活虎 虎虎生威

    百篇博客分析|本篇为:(消息封装篇) | 剖析LiteIpc进程通讯内容 进程通讯相关篇为: v26.08 鸿蒙内核源码分析(自旋锁) | 当立贞节牌坊的好同志 v27.05 鸿蒙内核源码分析(互斥锁 ...

  2. v80.01 鸿蒙内核源码分析(内核态锁篇) | 如何实现快锁Futex(下) | 百篇博客分析OpenHarmony源码

    百篇博客分析|本篇为:(内核态锁篇) | 如何实现快锁Futex(下) 进程通讯相关篇为: v26.08 鸿蒙内核源码分析(自旋锁) | 当立贞节牌坊的好同志 v27.05 鸿蒙内核源码分析(互斥锁) ...

  3. 3D 世界的钥匙「GitHub 热点速览 v.22.08」

    有没有想过把身边的物件儿转成 3D 动画,在网页上实现一把?本期特推的项目 Three.js 就是帮你创建 3D 页面的知名开源项目,好玩的 3D 世界在向你招手.除了打开浏览器 3D 世界的钥匙外, ...

  4. 使用.rmp文件在redhat7.9安装oracle19c

    19c开始,oracle提供了rmp安装包.感觉安装更方便一些了.记录一次测试环境安装. 1,创建交换空间 2,下载oracle 19c必要文件(oracle官网下载需要注册帐号,可以用迅雷下载后再上 ...

  5. jemter参数化是如何取值的？（数据分配）

    参数化文件数据 脚本设置 ${__threadNum}是线程号,${n}是取值 测试结果 第一次 线程1取值:1,4,7,10,12 线程2取值:2,3,6,11,16 线程3取值:5,9,15,17 ...

  6. Linux提权之信息收集

    1.操作系统版本 2.目标操作系统什么内核?多少位系统? 3.环境变量历史记录是否有利用? 4.运行了哪些服务和进程 top命令 5.安装了什么程序? 6.是否可以查看到root用户运行的进程 7.查 ...

  7. Ubuntu安装g++命令

    Ubuntu安装g++ sudo apt-get install make gcc g++ 再装上函数手册 sudo apt-get install manpages-dev 或者采用 sudo ap ...

  8. C++ string 常用函数总结

    头文件:#include<string> [注]:文中关于个数的参数文档中为 size_type 型,更本质是 size_t 型,因为typedef size_t size_type,而 ...

  9. 【C# .Net GC】强制垃圾回收 和System GC

    属性 GC.MaxGeneration:获取系统当前支持的最大代数. 方法 GC.GetTotalMemory(bool forceFullCollection) 方法  true表示该方法先做垃圾收 ...

  10. pyqt（二）

    二.文本和图片 1. 文本控件 文本控件是QLabel from PyQt5.QtWidgets import QWidget,QApplication,QLabel from PyQt5.QtCor ...