最近突然被别人问起css单冒号和双冒号有什么区别，答曰：“不知道”。

虽然还在填坑中，但作为一个跨过了初级的FEer,感觉着实汗颜，刚好今天下午在搜别的问题的时候，突然看到一个对比，嗯，我觉得写得还不错，暂时没有自己总结，所以先转了。

1、伪类与伪元素

CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

CSS3为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

单冒号(:)用于css3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

2、CSS3新增伪类

css中的单冒号和双冒号的更多相关文章

  1. css3单冒号和双冒号的区别

    css3中对于伪元素的使用,在项目开发中使用得当将会对代码的可读性又很大的提升.但是对于伪类大家或许都知道是一些选择器的使用,这里总结了关于伪元素中单冒号和双冒号的区别: 再官方定义中规定单冒号都为伪 ...

  2. c++里面的单冒号和双冒号

    c++ 中的单冒号与双冒号 1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned ...

  3. 关于css3中before与after用单冒号还是双冒号的疑虑

    在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写.

  4. php 单冒号 、双冒号的用法

    单冒号: 常用与三元运算,如:$result = $str ? $str : $str1; 双冒号: 1,当调用静态属性和静态方法时 2,当调用自身类或者父类的属性或者方法时

  5. c++中冒号(:)和双冒号(::)的用法

    1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned ; unsigned char c; } ; XXX (2)构造 ...

  6. C++中冒号和双冒号的用法

    1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; X ...

  7. python中的单引号，双引号和三双引号的区别

    1.单引号和双引号没有区别.都可以用就是为了方便,减少写太多的转义字符. 比如: str='Let\'s go!' str="Let's go!" 两种等价,但是第二种写法显然更优 ...

  8. css中（单冒号）：after和（双冒号）：：after的区别

    :after是伪元素 .::after是伪类 什么是伪类? CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态.例如,:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色. ::af ...

  9. Python中，单引号，双引号，三引号的使用区别与原因

    先说1双引号与3个双引号的区别,双引号所表示的字符串通常要写成一行如:s1 = "hello,world"如果要写成多行,那么就要使用/ ("连行符")吧,如s ...

随机推荐

  1. javascript操作select元素一例

    熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重 ...

  2. Object对象你真理解了吗？

    前言 五一回家又断更了一个放假时间了~~~ 只有光头才能变强 回顾前面: ThreadLocal就是这么简单 多线程三分钟就可以入个门了! 多线程基础必要知识点!看了学习多线程事半功倍 Java锁机制 ...

  3. ionic1 sqlite的添加使用

    开始使用这个存储方式的原因是  之前用的Local Storage 存储在ios设备上  当内存达到一定程度时 ios会自动清除app的一部分存储 所以之前存的东西可能会被清除  达不到想要的功能效果 ...

  4. 听晴明老师从头讲React Native（原价399）百度云下载 百度网盘

    适用人群 能使用至少一门主流编程语言:有基本的面向对象的概念:最好有一些web相关的知识和概念. 课程概述 新颖.实用.详尽的ReactNative零基础课程,由国内权威的ReactNative中文网 ...

  5. 关于减少BUG的思考

    开发之前,就要先设计,理清好思路:如果需求都不清楚,软件肯定有缺陷: 和客户.测试的沟通 如果开发出来的东西本身就有BUG,交给测试,会浪费很多人的时间. 开发做完一个功能后,要自己做一遍测试 自己的 ...

  6. DDD中直接引用和ID关联的关系

    聚合根到聚合根:通过ID关联: 聚合根到其内部的实体,直接引用: 聚合根到值对象,直接引用: 实体到聚合根: 通过ID关联 : 实体到其聚合的聚合根:1对1ID关联,1对多可直接引用 : 实体到其聚合 ...

  7. MognoDB3.4.2用户访问配置管理

    说在前面,官方文档似乎略有瑕疵. 说一下大规则:把绑定IP换成127.0.0.1IP之后,把security的authorization关闭掉做用户添加操作. 添加用户的方法必须是createUser ...

  8. JavaScript 中的undefined and null 学习

    JavaScript 中的undefined and null learn record from the definitive guide to html5 JavaScript 中有两个特殊值:u ...

  9. mac os x 10.9.3 升级到10.10.4 记录

    昨天终于忍不住,将mac pro 的操作系统从 os x 10.9.3 升级到10.10.4,因为网络不给力,500k/s,光系统包都要5.6G,所以整整下来了一个工作白天,等下班的时候开始安装,不过 ...

  10. JAVAEE——BOS物流项目13：Quartz概述、创建定时任务、使用JavaMail发送邮件、HighCharts概述、实现区域分区分布图

    1 学习计划 1.Quartz概述 n Quartz介绍和下载 n 入门案例 n Quartz执行流程 n cron表达式 2.在BOS项目中使用Quartz创建定时任务 3.在BOS项目中使用Jav ...