CSS伪类与CSS伪元素的区别及由来具体说明


Posted in HTML / CSS onDecember 07, 2012

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

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

在CSS2.1里,5.10 Pseudo-elements and pseudo-classes 描述了这两个概念的由来,它们是被一同提及的。但到了 Selector Level 3 里,它们就被分开到两个小节里加以区分。但无论如何,伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”之类的选择器,而这在一些出版场景里又是必须的。用标准里的话说:
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
简单翻译一下,就是:
CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化
这么说很抽象,其实就是为了描述一些现有CSS无法描述的东西。缺少什么,则引入什么,不管是标准,还是人,都是如此成长而来。

伪类与伪元素的区别
这里我大可以列一个表格,把所有的伪类和伪元素分开罗列,但这未免太形式化,与其记住“哪些是哪些不是”,不如真正地加以区分。伪类和伪元素本身就有一个根本的不同之处,这点直接体现在了标准的描述语句上。
先看一个伪元素 first-line 例子。现在有一段HTML,内容是一个段落:

复制代码
代码如下:

<p>I am the bone of my sword. Steel is my body, and fire is my blood.
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

如果我要描述这个段落的第一行,在不用伪元素的情况下,我会怎么做?想来我一定要嵌套一层 span,然后加上类名:
复制代码
代码如下:

<p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

再反观一个伪类 first-child 的例子,有一个简单的列表:
复制代码
代码如下:

<ul>
<li></li>
<li></li>
</ul>

如果我要描述 ul 的第一个元素,我无须嵌套新的元素,我只须给第一个已经存在的 li 添加一个类名就可以了:
复制代码
代码如下:

<ul>
<li class="first-child"></li>
<li></li>
</ul>

尽管,第一行和第一个元素,这两者的语意相似,但最后作用的效果却完全不同。所以,伪类和伪元素的根本区别在于:它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看,如果需要添加新元素加以标识的,就是伪元素,反之,如果只需要在既有元素上添加类别的,就是伪类。而这也是为什么,标准精确地使用 “create” 一词来解释伪元素,而使用 “classify” 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素,另一个则是描述已经存在的符合“幽灵”类别的元素。

伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

伪类和伪元素混淆的由来
最为混淆的,可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类,而且即使在概念混淆的情况下,实际使用上也毫无问题——因为即使概念混淆,对真正使用也不会造成多少麻烦:)
CSS Selector Level 3 为了区分这两者的混淆,而特意用冒号加以区分:
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

并且规定,浏览器既要兼容CSS1和2里既存的伪元素的单冒号表示,同时又要不兼容CSS3新引入的伪元素的单冒号表示。后来的结果大家都知道,因为低版本IE对双冒号的兼容问题,几乎所有的CSSer在写样式的时候都不约而同的使用了单冒号。这无形中,让这种混淆延续了下来。而CSS3新伪元素的使用到目前为止,还远远不成气候。

伪类和伪元素使用上需要注意的地方
明白其不同之后,就需要注意和考虑在实际使用上的一些问题。比如:伪类和伪元素的选择器特殊性(优先级)如何计算?
我在之前的 CSS选择器距离无关 一文中,翻译过CSS标准的计算选择器的特殊性这一部分,看完那部分,答案就清楚了:除了否定伪类的特殊规定外,分开各自作为真正的类和元素计算。
虽然标准以后的版本可能会允许选择器多伪元素的情况,但就目前为止,伪元素在一个选择器里只能出现一次,并且只能出现在末尾。实则,伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分,所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用,没有数量上的限制,只要不是相互排斥的伪类,也可以同时使用在相同的元素上。关于CSS3选择器的详细解释,推荐 rogerjohansson 的 CSS 3 selectors explained。

结束语
本来只是想稍稍写点,不想话又多了…到了最后,我一度觉得自己还漏了很多,不断在脑海里搜索,但可能只能下次在补充了。写这篇的目的是为下篇《CSS伪类与CSS伪元素的典型应用》做个铺垫,不想理论的东西一写自己就开始废话连篇了,惭愧…回看本篇,自己的思路跳的有些乱了,洋洋洒洒这么多字,可能概括起来没几句话,但如果希望尽可能表达清楚,则又免不了冗余过头。理论总是显得枯燥了些,下篇闲谈应用应该不至于这么沉闷:)

HTML / CSS 相关文章推荐
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 #HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 #HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 #HTML / CSS
CSS3悬停效果案例应用
Nov 21 #HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 #HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 #HTML / CSS
css3绘制天猫logo实现代码
Nov 06 #HTML / CSS
You might like
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
详解php的socket通信
2015/08/11 PHP
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
Shell编程面试题
2012/05/30 面试题
医学生自我鉴定范文
2014/03/26 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
村委会贫困证明范本
2014/09/17 职场文书
学前班学生评语
2014/12/29 职场文书
沈阳故宫导游词
2015/01/31 职场文书
会计试用期自我评价
2015/03/10 职场文书
感恩教育观后感
2015/06/17 职场文书
中学语文教学反思
2016/02/16 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
TS 类型兼容教程示例详解
2022/09/23 Javascript