前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及<a>标签的:link、visited等，伪元素较常见的比如:before、:after等。

其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。

伪类 - pseudo classes

首先看看CSS2中对伪类的定义：

CSS 伪类用于向某些选择器添加特殊的效果。

单单看定义完全不懂在讲什么。截止CSS2，伪类有以下几种（偷个懒，截图引自W3School）：

然后是CSS3对伪类的定义：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (

CSS3伪类和伪元素的特性和区别的更多相关文章

  1. CSS3伪类和伪元素的特性和区别尤其是 ::after和::before

    伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...

  2. css3 -- 伪类与伪元素

    伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){}  E : first-*(odd){} B:nth-child 是根 ...

  3. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  4. css3怎么分清伪类和伪元素

    伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...

  5. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  6. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  7. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  8. css3的伪（伪类和伪元素）大合集

    本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...

  9. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

随机推荐

  1. C#中Math.Round()实现中国式四舍五入

    C#中Math.Round()实现中国式四舍五入 C#中的Math.Round()并不是使用的"四舍五入"法.其实在VB.VBScript.C#.J#.T-SQL中Round函数都 ...

  2. 解决Visual Studio 2010/2012在调试时lock文件的方法

    调试3dsmax插件,有一个避免每次修改插件代码都需要重启3dsmax的方法,就是将导出的核心代码写在一个独立的DLL中,然后在插件代码需要导出时LoadLibrary这个DLL,导出之后再FreeL ...

  3. 【转】iOS 10 UserNotifications 使用说明

    注意:XCode8的需要手动开启主target Capabilities中的Push Notification. 关于创建多个target后真机测试的证书问题,除了主target手动创建开发和发布证书 ...

  4. Java中BigDecimal的8种舍入模式

    java.math.BigDecimal 不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值和32位的整数标度(scale)组成. 如果为零或正数,则标度是小数点后的位 ...

  5. Android中GPS类及方法简介

    GPS是Global Positioning System(全球定位系统)的简称,它的作用就是为全球的物体提供定位功能.GPS定位是一门高新技术,但对于Android程序员来说,开发GPS功能的应用程 ...

  6. visual webgui theme designer

  7. XML 和 List 互转类

    XML 和 List 互转类 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  8. 微信小程序实例-获取当前的地理位置、速度

    微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var a ...

  9. yum源的相关事项

    有时候需要某些个别的包,不想使用yum的关联更新的时候,找到rpm包是个问题,但是163可以提供: http://mirrors.163.com/centos 1.先看看centos版本:cat /e ...

  10. 调用CXF工具 生成 WSDL【转】

    在做WebService的时候,生成WSDL是必不可少的一步.我们通常使用的工具就是Axis和CXF. CXF提供了一个命令行工具,可以通过命令来生成Java to WSDL,也可以由WSDL生成Ja ...