关于两者的区别，其实是很古老的问题。但是时至今日，由于各种网络误传以及一些不负责任的书籍误笔，仍然有相当多的人将伪类与伪元素混为一谈，甚至不乏很多CSS老手。早些年刚入行的时候，我自己也被深深误导，因为论坛里的帖子大多不关心这种概念的细微差别，即使有人出来说一句：“这两个是不同的”，也只是被更多的帖子淹没掉而已。所以觉得有必要写下这些我所知的部分，这里着重写的是为什么这两者不同，以及一些平时容易错过的细节。

无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。

相同点：

Pseudo-class和pseudo-element的语法都是以selector或者selector.class开始的。

不同点：

Pseudo-class的操作对象是文档树中已有的元素，而pseudo-element则创建了一个文档数外的元素。因此，Pseudo-class和pseudo-element的区别在于：有没有创建一个文档树之外的元素。Pseudo-class只有一个冒号，pseudo-element有两个冒号

引用自网页：http://www.mamicode.com/info-detail-2496434.html

pseudo-class与pseudo-element的不同点与相同点的更多相关文章

  1. sessionStorage和localStorage的用法，不同点和相同点

    一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...

  2. css中attribute selector及pseudo class

    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors 在css3规范中,定义了以下几种类型的selector: Ba ...

  3. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  4. (转)　Written Memories: Understanding, Deriving and Extending the LSTM

    R2RT   Written Memories: Understanding, Deriving and Extending the LSTM Tue 26 July 2016 When I was ...

  5. org.jsoup.select.Selector

    org.jsoup.select.Selector CSS-like element selector, that finds elements matching a query. Selector ...

  6. Sizzle 源码分析 （二）

    在Sizzle函数中,如果能快速处理或者通过querySelector处理,那么就使用它处理.否则使用select函数处理 . select函数 select = Sizzle.select = fu ...

  7. jquery-1.11.1.js

       每次想要使用这个js时,总是要到官网上下载,太麻烦,现在把它收录了 jquery-1.11.1.js /*! * jQuery JavaScript Library v1.11.1 * http ...

  8. puppeteer(五）chrome启动参数列表API

    List of Chromium Command Line Switches https://peter.sh/experiments/chromium-command-line-switches/ ...

  9. CEF 支持的命令行参数

    参考:https://peter.sh/experiments/chromium-command-line-switches/ List of Chromium Command Line Switch ...

随机推荐

  1. C语言--第3次作业

    1.本章学习总结 1.1思维导图 1.2 本章学习体会及代码量学习体会 1.2.1学习体会 我眼中的函数 这一章接触到了新的知识--函数,不同于之前所学的编程,函数具有很清楚的分工性,且可以用来多次调 ...

  2. 【Mac】【创建钥匙串】

    1 Mac在钥匙串创建系统证书失败 https://blog.csdn.net/lllkey/article/details/79423596 问题: 在Eclipse的Debug,使用gdb的时候, ...

  3. 常量（constant）

    在java语言中,主要用final来定义一个常量.常量一旦被初始化不能更改其值. 常量:大写字母和下划线:MAX_VALUE final double PI = 3.14; PI = 3.15;//编 ...

  4. 遗传算法（GA）

    来自:https://blog.csdn.net/u010451580/article/details/51178225 遗传算法是模仿生物进化机制的随机全局搜索和优化方法.借鉴达尔文进化论和孟德尔的 ...

  5. HTTP响应 状态码描述

  6. linux命令 xxd

    xxd,能够查看linux下文件的二进制表示.man一下xxd.能够得到下面信息 NAME       xxd - make a hexdump or do the reverse. SYNOPSIS ...

  7. acure使用

    打开,选择用IE浏览器,如果选择Chrome浏览器会提示让安装插件

  8. Android模拟器Genymotion使用

    介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的特点,是Android开发.测试等相关人员的必备工具. 官网地址:https://www.genym ...

  9. 可编程并行接口8255A详解

  10. rem 转 px

    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...