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

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

  2. contenOs7编码问题

  3. ubuntu使用抓包工具，charles

    参考官网:https://www.charlesproxy.com/documentation/installation/apt-repository/ wget -q -O - https://ww ...

  4. web 后台返回json格式数据的方式（status 406）

    1.在类上使用注解 @RestController public class HttpComentInterface { } 2.在方法是使用注解  @ResponseBody @RequestMap ...

  5. webpack学习笔记 (一)

    一.安装nodejs: 点击打开nodejs官方站点: 点击下图框住的按钮,下周nodejs安装包: 安装下载好的安装包. 安装完毕之后,在cmd中输入node -v查看是否已经安装成功  如果有版本 ...

  6. 用Python实现支持向量机并处理Iris数据集

    SVM全称是Support Vector Machine,即支持向量机,是一种监督式学习算法.它主要应用于分类问题,通过改进代码也可以用作回归.所谓支持向量就是距离分隔面最近的向量.支持向量机就是要确 ...

  7. CSS3新特性介绍

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  8. 【IDEA填坑】springboot整合ssm框架

    遇到俩问题:一个是mybatis生疏  在EmpMapper.xml中定义resultMap <resultMap id="EmpWithDept" type="c ...

  9. vue-文字块收缩与展开功能

    在设计图中要求的效果为: 文字限制超过9行即隐藏,并显示“展开”按钮,点击按钮进行切换,控制文本全部展示和部分展示 在原本的实现过程中,使用了红框内的判断方式: 页面代码: 样式则规定嵌套元素给一个死 ...

  10. 数据库的数据进行改动，Cognos报表展示未及时更新

    1. 问题描述 手工修改了DB中的测试数据,但是返回报表看,数据还没有更新 2. 问题分析 这是因为Cognos为了查询效率设计了高速缓存的选项 3. 解决方案 方法1:在数据包端禁用高速缓存,那么所 ...