伪类与伪元素有什么区别？_Web前端

4条回答

凹凸曼

2楼 · 2020-04-02 13:39

伪类种类

请输入图片描述

伪元素种类

请输入图片描述

区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

p>i:first-child {color: red}firstsecond

请输入图片描述 //伪类 :first-child 添加样式到第一个子元素
如果我们不使用伪类，而希望达到上述效果，可以这样做：

.first-child {color: red}firstsecond

即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素：

p:first-letter {color: red}I am stephen lee.

请输入图片描述 //伪元素 :first-letter 添加样式到第一个字母
那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

.first-letter {color: red}I am stephen lee.

即我们给第一个字母添加一个 span，然后给 span 增加样式。
两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

总结

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes  ::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者

chai - 嘿咻嘿咻~

3楼 · 2020-05-22 10:19

简单的来说，伪类是针对CSS，而伪元素是针对HTML，伪类选择器是CSS选择器的一种，而伪类是“假”的HTML标签

伪类（选择器）本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

在CSS3中，伪类和伪元素的语法得到了进一步的调整（一个冒号和两个冒号）；

在开发当中，可以同时使用多个伪类，而只能同时使用一个伪元素。

我行其野

4楼 · 2020-07-21 15:36

1个相同点：都是被添加到一个选择器末尾的关键字

2个不同点：

① 伪类是以1个冒号(:)作为前缀被添加到选择器末尾的关键字；伪元素是以2个冒号(::)作为前缀被添加到选择器末尾的关键字

② 如果伪类你用了2个冒号，不会报错，但也不会生效，比如 ::hover；

　但伪元素你用1个或2个冒号不会报错且有效，比如，:before，::before

靓猴一枚

5楼 · 2021-11-08 09:24

一：伪类：
1:定义：css伪类用于向某些选择器添加特殊效果。
伪类其实与普通的css类相类似，可以为已有的元素添加样式，但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式，所以将其称为伪类。

2:伪类选择器有哪些:
1）:link向未被访问的链接添加样式（链接，看来是只用于）
2）:visited向已被访问过的链接添加样式（链接，看来还是只用于）
3）:hover当鼠标悬浮在元素上方时，向元素添加样式（没有特意指定必须是链接，所以这个标签被大量用于定义任何一个块/行元素在鼠标经过时的样式）
4）:active向被激活的元素添加样式（当鼠标点击时的样式，要注意是点击时的样式的变化，这个也不是只有超链接才能用的伪类选择器）
5）:focus向拥有键盘输入焦点的元素添加样式（如input输入框鼠标点击时产生背景颜色的变化，注意是键盘输入焦点。注意有些浏览器不支持此功能样式）
6）:first-child 用于匹配父元素中的第一个元素。例如E:first-child,找的是E元素，E元素必须是他的父元素的第一位元素（扩展【：nth-child(n)】用于匹配父元素的第n个子元素E，这个父元素必须是元素E的父元素。）。
7）:lang向带有指定lang属性的元素添加样式（在标签中设置lang的属性，在样式表中对这种确切lang属性值的元素进行样式的设定，即使你有能力为不同的语言定义特殊的规则）
二：伪元素：
1:伪元素用于创建一些不在文档树中的元素，并且为他添加样式，举个例子：使用伪元素”：：before”可以在一个元素前边增加一些文本，并且可以为这些文本添加一些样式，虽然用户可以看到这写文本，但是这些文本是不存在于文档树中的。
2:几种常见的伪元素：
1）:frist-letter用于向文本中的第一个字母添加样式
2）:first-line向文本的首行添加样式
3）:before在元素之前添加内容
4）:after在元素之后添加内容
三:伪元素和伪类的区别：
（1）伪类和伪元素的最大区别就在于有没有创建一个文档树以外的元素。伪元素创建了一个文档树以外的元素（虚拟容器）并为他添加样式，这个容器不包含任何DOM元素但是可以包含内容。换句话说伪类和伪元素的区别就是伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。
（2）伪类使用的是单冒号，但是在css3中规定伪元素使用的双冒号，但是除了少部分的伪元素必须使用双冒号以外，像after还有before都是支持单引号的。为了兼容性所以目前还是在使用一些常见的伪元素的时候采用单冒号较为稳妥。