谈谈css中的伪类和伪元素谈谈css中的伪类和伪元素最美的生活百家号熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法。css选择器css选择除了我们常见的也是使用频率最高的class选择器，id选择器，属性选择器，派生选择器等之外，还有重要的一类，是根据元素的状态或者元素中特别的内容来选从HTML文档的DOM树中获取元素，就两种就是伪类和伪元素，他们使用“：”或者“：：”来选择。css伪类伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。css伪元素伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。css伪元素两者之间的区别和联系伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。最美的生活百家号最近更新：简介:让最美的生活，成为每天的日子！作者最新文章相关文章css伪元素和伪类的区别_百度知道
css伪元素和伪类的区别
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
简单的来说，伪类是针对CSS，而伪元素是针对HTML，伪类选择器是CSS选择器的一种，而伪类是“假”的HTML标签伪类（选择器）本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器；在CSS3中，伪类和伪元素的语法得到了进一步的调整（一个冒号和两个冒号）；在开发当中，可以同时使用多个伪类，而只能同时使用一个伪元素。
教育与HTML5的传道者
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。73.5k 次阅读
之前写了一篇
的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @riophae 兄指正了我的错误，所以今天打算好好研究下两者的区别。
首先，阅读 w3c 对两者的定义：
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。
伪元素种类
这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。
p&i:first-child {color: red}
&i&first&/i&
&i&second&/i&
//伪类 :first-child 添加样式到第一个子元素
如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child {color: red}
&i class="first-child"&first&/i&
&i&second&/i&
即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：
p:first-letter {color: red}
&p&I am stephen lee.&/p&
//伪元素 :first-letter 添加样式到第一个字母
那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？
.first-letter {color: red}
&p&&span class='first-letter'&I&/span& am stephen lee.&/p&
即我们给第一个字母添加一个 span，然后给 span 增加样式。
两者的区别已经出来了。那就是：
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
:Pseudo-classes
::Pseudo-elements
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
34 收藏&&|&&213
伪类，首先是类的一种， 作用于标签本身（状态）
伪元素首先是元素，作用于内容本身
伪类，首先是类的一种， 作用于标签本身（状态）
伪元素首先是元素，作用于内容本身
嗯，确实容易混淆，我也是按自己的理解写的，比如文中举的 first-child 和 first-letter 的例子，细想起来，其实为了实现 first-letter 的效果，实际上也相当于伪造了一个元素，将首字母放到该元素中，然后再添加样式实现效果，而 first-child 就相当于直接给自己的第一个子元素添加样式，并不需要伪造一个新的元素。:)
嗯，确实容易混淆，我也是按自己的理解写的，比如文中举的 `first-child` 和 `first-letter` 的例子，细想起来，其实为了实现 `first-letter` 的效果，实际上也相当于伪造了一个元素，将首字母放到该元素中，然后再添加样式实现效果，而 `first-child` 就相当于直接给自己的第一个子元素添加样式，并不需要伪造一个新的元素。:)
其实 :first-child 和 :lang 也可以理解成 "状态". 子元素在容器中的位置、元素内容的语言都是可变的, 当元素的位置处于容器的开头时, 它就是 "第一个子元素" 的状态; 当元素内容为某种语言时, 它就是 "某种语言" 的状态.
其实 :first-child 和 :lang 也可以理解成 &状态&. 子元素在容器中的位置、元素内容的语言都是可变的, 当元素的位置处于容器的开头时, 它就是 &第一个子元素& 的状态; 当元素内容为某种语言时, 它就是 &某种语言& 的状态.
&i class="first-child"&first&/i&
&i&second&/i&
&p&&span class='first-letter'&I&/span& am stephen lee.&/p&难道这两者不都是添加一个实际的class来改变样式吗？为什么文中说第一个是添加一个实际的类，第二个是添加一个实际的元素呢？@StephenLee
&i class=&first-child&&first&/i&
&i&second&/i&
```&p&&span class='first-letter'&I&/span& am stephen lee.&/p&```难道这两者不都是添加一个实际的class来改变样式吗？为什么文中说第一个是添加一个实际的类，第二个是添加一个实际的元素呢？@StephenLee
第二个必须添加一个元素才能达到伪元素的效果，如例子中的&span&元素
第二个必须添加一个元素才能达到伪元素的效果，如例子中的&span&元素
简而言之，伪类就是可以通过直接添加一个类样式达到同等效果，而伪元素，则需要先添加一个元素，然后在元素上添加样式才能达到同等效果
简而言之，伪类就是可以通过直接添加一个类样式达到同等效果，而伪元素，则需要先添加一个元素，然后在元素上添加样式才能达到同等效果
说真的，要“顾名思义”，还真的有点混淆。
伪元素在我看来，就是伪造的元素。before,after多么符合这个想法，first-line,first-letter吧，你说，存在段落和首个字母，但是又不算元素。
至于伪类，还不如理解成状态。其它两个first-child和lang，额，真心无法理解。
说真的，要“顾名思义”，还真的有点混淆。
伪元素在我看来，就是伪造的元素。before,after多么符合这个想法，first-line,first-letter吧，你说，存在段落和首个字母，但是又不算元素。
至于伪类，还不如理解成状态。其它两个first-child和lang，额，真心无法理解。
写的不错~ 赞一个! :D
写的不错~ 赞一个! :D
谢谢锐风兄！:)
谢谢锐风兄！:)
thank you !
**thank you !**
解释的真好！
解释的真好！
first-child的作用就像是一个类名，它只是把你想要的元素区分出来，那些元素本身就存在；而first-line则表现得像是“新建了一个元素”一样，以这样的形式去寻找你想要的内容。所以，一个“像类”（伪类），一个“像元素”（伪元素）。
first-child的作用就像是一个类名，它只是把你想要的元素区分出来，那些元素本身就存在；而first-line则表现得像是“新建了一个元素”一样，以这样的形式去寻找你想要的内容。所以，一个“像类”（伪类），一个“像元素”（伪元素）。
这句话让我真正理解了两者----------“伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。”
这句话让我真正理解了两者----------“伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。”
今天终于搞明白了
今天终于搞明白了
解释的挺好的~
解释的挺好的~
先知道一些名词，然后通过实际的例子支撑并在项目中得出相关的结论，觉得理论太屌，命名太屌，eg,伪类（伪：假的，类：css中的class或相似作用的东西）、伪元素（伪：假的，元素：html标签元素）
先知道一些名词，然后通过实际的例子支撑并在项目中得出相关的结论，觉得理论太屌，命名太屌，eg,伪类（伪：假的，类：css中的class或相似作用的东西）、伪元素（伪：假的，元素：html标签元素）
感谢，今天终于明白了
感谢，今天终于明白了
可以，应该能说明两者本身区别了。我看后的理解是伪类作用于元素当前的状态修饰（点击，悬浮，链接），伪元素作用于元素当前内容修饰（之前，之后，首字，首行）。
可以，应该能说明两者本身区别了。我看后的理解是伪类作用于元素当前的状态修饰（点击，悬浮，链接），伪元素作用于元素当前内容修饰（之前，之后，首字，首行）。
一直想找到一个点去区分和理解伪类和伪元素，并且想知道伪字的含义何在，今天看到这篇文章，感觉一切都解释得通了
一直想找到一个点去区分和理解伪类和伪元素，并且想知道伪字的含义何在，今天看到这篇文章，感觉一切都解释得通了
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a element. For example, the ::first-line pseudo-element targets only
the first line of an element specified by the selector.都是添加到选择器上，伪类是描述一种特定的状态，伪元素师为元素的某部分添加样式。
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a element. For example, the ::first-line pseudo-element targets only
the first line of an element specified by the selector.
都是添加到选择器上，伪类是描述一种特定的状态，伪元素师为元素的某部分添加样式。
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}