::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. NTFS ADS（备用数据流）

    NTFS Alternate Data Stream(ADS)   1993年微软推出了基于流行的NT平台的Windows NT操作系统.之后,NTFS作为WIndows开发基于NT的操作系统时的首选 ...

  2. JVM基础学习（二）：内存分配策略与垃圾收集技术

    Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人却想出来 垃圾收集概述 Java内存模型中的堆和方法区是垃圾收集技术所需要关注的终点,因为其他的区域会跟 ...

  3. 我的平安夜-Merry Christmas

    我的平安夜-Merry Christmas 平安夜给自己买的第一个"苹果",嘻嘻. 今夜,不想去学习技术知识点什么的, 我们就想到哪里写哪里,就简单聊聊思维方式吧. 其实我不想做今 ...

  4. IDEA中快速排除maven中的依赖

    选中该模块 点击show dependenties 切换试图 选中要排除的依赖,右击 选择Execlude,然后选择需要在哪个模块添加排除依赖 完成

  5. [LeetCode]1512. 好数对的数目

    给你一个整数数组 nums . 如果一组数字 (i,j) 满足 nums[i] == nums[j] 且 i < j ,就可以认为这是一组 好数对 . 返回好数对的数目. 示例 1: 输入:nu ...

  6. web安全之备份

    1:打开界面,一头雾水.根据题目提示"备份是个好习惯"可以想到,这应该是一个代码泄露问题.常见的网页主页index.php.那么备份文件一般是.bak文件类型.尝试下载该文件 in ...

  7. PDF太大怎么办？缩小PDF的4种常用方法

    PDF太大怎么变小?我们在平时学习或生活中经常需要上传或提交一些资料,现在网站都是默认需要提交PDF格式的电子文档,有时提交资料会提示超过系统大小,如何才能使PDF缩小呢? 一.在线压缩 首先搜索sp ...

  8. [题解]Codeforces Round #519 - B. Lost Array

    [题目] B. Lost Array [描述] Bajtek有一个数组x[0],x[1],...,x[k-1]但被搞丢了,但他知道另一个n+1长的数组a,有a[0]=0,对i=1,2,...,n.由此 ...

  9. Win10系统下关闭管理员运行确认弹窗

    Windows10及以上系统对于安全的考虑,对于程序运行时的权限做了控制.    点击后,会弹出确认的弹窗. 像我做测试,或者使用cmd经常需要administrator 权限,一直弹弹弹就很烦. 要 ...

  10. C#操作WMI指南

    WMI应用(一个系统自带的测试WMI语句的工具) 1. 开始-运行-输入:wbemtest 回车2. 单击"连接", 输入:root\cimv2 回车; 或者ROOT\Securi ...