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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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 curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php获取apk包信息的方法
2014/08/15 PHP
php常用的url处理函数总结
2014/11/19 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
python写入已存在的excel数据实例
2018/05/03 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
详解python中的lambda与sorted函数
2020/09/04 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
股权投资意向书
2014/04/01 职场文书
纠纷协议书
2014/04/16 职场文书
公司运动会策划方案
2014/05/25 职场文书
优秀班集体申报材料
2014/12/25 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
运动员代表致辞
2015/07/29 职场文书
详解Vue的options
2021/05/15 Vue.js
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python