关于两者的区别，其实是很古老的问题。但是时至今日，由于各种网络误传以及一些不负责任的书籍误笔，仍然有相当多的人将伪类与伪元素混为一谈，甚至不乏很多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语言--第2次作业

    1.本章学习总结 1.1思维导图 1.2本章学习体会及本章代码量 1.2.1学习体会 不同于前几周简单的条件语句等,这一周开始学习循环结构for,while语句,甚至是多种语句嵌套使用,让我直接感受到 ...

  2. 【Git】【环境搭建】

    Mac下GitHub安装及使用教程: https://blog.csdn.net/u012460084/article/details/45830911

  3. 使用JSR-303进行校验

    package com.ieou.comac.module.web.dto.employee; import lombok.Data; import javax.validation.constrai ...

  4. linux命令 xxd

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

  5. python 绘制点线

    plot(x, y) #默认为蓝色实线 plot(x, y, 'r*') #红色星状标记 plot(x, y, 'go-') #带有圆圈标记的绿线 plot(x, y, 'ks:') #带有正方形标记 ...

  6. unity项目build成webgl时选择生成目录（解决方法）

    在unity里点击File>>Build Settings...>>勾选你要生成的Scenes>>选择webgl>>后面Development Buil ...

  7. zoj3223

    其实这题不超时完全是因为串长度太小,如果串够长,一次匹配后都要往上跳,复杂度是n^2的. #include <iostream> #include <cstdio> #incl ...

  8. jieba库的使用和好玩的词云

    1.jieba库基本介绍 (1).jieba库概述 jieba是优秀的中文分词第三方库 - 中文文本需要通过分词获得单个的词语         - jieba是优秀的中文分词第三方库,需要额外安装 - ...

  9. 嵌套if-esle语句

    C语言自学之嵌套if-esle语句 Dome : 获奖条件为年销售业绩100万以上,并且入职满两年的员工.小明进入公司1年,销售业绩为120万. 在代码编辑器中使用嵌套if-else语句判断小明是否有 ...

  10. <a> 标签详解

    一.<a> 标签的样式 在所有浏览器中,链接的默认外观是: 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 我们可以使用CSS伪 ...