最近突然被别人问起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. 【48】java抽象类和接口的定义和区别

    首先看看他们的区别: 接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是Java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力. ...

  2. 《转》iOS 平台 Cocos2d-x 项目接入新浪微博 SDK 的坑

    最近在做一个 iOS 的 cocos2d-x 项目接入新浪微博 SDK 的时候被“坑”了,最后终于顺利的解决了.发现网上也有不少人遇到一样的问题,但是能找到的数量有限的解决办法写得都不详细,很难让人理 ...

  3. mybatis中分页插件PageHelper的使用

    转载博客:http://blog.csdn.net/u012728960/article/details/50791343

  4. majority element(数组中找出出现次数最多的元素)

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  5. Web开发问题记录

    1.先说一个CSS的:CSS中带有中文(比如字体定义)的属性定义最好放在该选择器定义诸项的最后一条,为什么----编码格式问题. 2.其实自己也可以用自己写的DispatcherServlet+jsp ...

  6. django1.8升级1.9的几个问题

    1.URL Pattern警告,旧式的URL定义方法将在1.10版本中被废止,所以这个版本仅仅是警告,不过这个警告让我看到了升级1.9这个非LTS版本的意义. 2.Django自身所带Models变化 ...

  7. require './ex25' can't load such file

    require './ex25' can't load such file 在练习learn ruby the hard way时候,第25题,发生了一下错误 LoadError: cannot lo ...

  8. DDGScreenShot--iOS 图片处理--多图片拼接 （swift）

    写在前面 最近总结了关于图片处理相关的内容,之前在二三四五工作的时候,也做过关于这方面的分享,图片的处理内容很多,会分很多模块来讲解. 今天简单讲多图片的拼接. 上代码 func composeIma ...

  9. Flask请求扩展和数据库连接池

    1.1.Flask之请求扩展 #!/usr/bin/env python # -*- coding:utf-8 -*- from flask import Flask, Request, render ...

  10. 洛谷 P1430 解题报告

    P1430 序列取数 题目描述 给定一个长为\(n\)的整数序列\((n<=1000)\),由\(A\)和\(B\)轮流取数(\(A\)先取).每个人可从序列的左端或右端取若干个数(至少一个), ...