首先先来看看伪类与伪元素的定义
w3c中对于它们是这么解释的
CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器
讲道理，可能我语文不好，我觉得这两句话是等价的
根本不能看出有什么区别
都是对某些选择器“加特技”
标准有这么一句话翻译过来是这样的
CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化
这话更抽象，其实意思就是对那些我们不能通过class、id等选择元素的补充
区别
这个区别我们需要一个例子来理解
This is a text
运行结果是如图
如果我们想要第一个em标签字体颜色变红怎么做呢
使用我们熟悉的伪类很简单
em:first-child {
color: red;
}
如果我们想要第一个em标签字体颜色变红怎么做呢
使用我们熟悉的伪类很简单
em:first-child {
color: red;
}
运行结果如图
但是如果不存在伪类我们怎么做呢
这是我们就需要为第一个em标签添加类
This is a text
em.first-child { color: red; } 可以实现同样的效果
还是这个例子
现在我想让这个段落的第一个字母变红
怎么做呢
这回我们需要使用伪元素
p::first-letter {
color: red;
}
