伪元素与伪类的使用

傷城~ 2021-09-20 15:32 433阅读 0赞

伪元素伪类听名字可能就会产生迷惑，其实从名称上我们也可以获取一些信息，伪元素——顾名思义是一个元素，伪类——与类class有关系，不是一个元素！

在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义，而二者在语法是一样的，都是以`:`开头，这造成很多人会将某些伪元素误认为是伪类，如`:before`，`:after`；而在CSS3给出的定义中，二者区别更为明显，也更容易理解。

## 伪元素 ##

伪元素是一个元素，这个元素并不同于一般的html素，伪元素是通过css代码生成的，因此称它为伪元素，常见的伪元素有::after/::before/::first-letter/::first-line等等。

## 伪类 ##

伪类是DOM树没有定义的虚拟元素，伪类用来选择DOM树之外的信息，或是不能用简单的选择器进行表示的信息。常见的伪类有:hover/:visited/:active/:link等等。

我们可以把伪类理解为HTML标签的各种状态，例如a标签的光标悬浮状态（hover），访问过状态（visited）等。

## 伪元素与伪类区别 ##

*  伪元素是一个非标准的HTML元素，伪类不是元素，而是html元素之外的包含的信息，可以理解成元素的状态
 *  他们都被选择，但不能被一般的选择器选中，他们的选择器需要加“：”，例：a：hover、div：after等
 *  伪元素可以通过CSS被创建，伪类不能，它只能被CSS选中

## 什么时候使用伪元素 ##

当想在页面上添加一个元素，但又不想在body中写时，可以使用伪元素；当想一次为想在多个元素中添加元素时，可以使用伪元素，例如在每个没使用浮动的元素后添加一个元素（此元素用来清除浮动）、在所有二级菜单的前边添加一个span用来显示当前光标悬浮在该菜单时。

--------------------

参考文章：[https://www.cnblogs.com/ammyben/p/8012747.html][https_www.cnblogs.com_ammyben_p_8012747.html]

[https_www.cnblogs.com_ammyben_p_8012747.html]: https://www.cnblogs.com/ammyben/p/8012747.html

发表评论取消回复

表情：

评论列表（有 0 条评论，433人围观）

还没有评论，来说两句吧...

相关阅读

相关伪类与伪元素

*伪类，更多的定义的是状态**。常见的伪类有 :link、:visited、 :hover、 :active、 :not、:first-child、:last-child...

本是古典何须时尚/ 2024年04月18日 17:07/ 0 赞/ 59 阅读

相关 css 伪类、伪元素

一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

青旅半醒/ 2022年12月18日 03:55/ 0 赞/ 179 阅读

相关伪类与伪元素

首先，阅读 `w3c` 对两者的定义： `CSS` 伪类用于向某些选择器添加特殊的效果。 `CSS` 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第

一时失言乱红尘/ 2022年09月30日 03:47/ 0 赞/ 242 阅读

相关 css伪类与伪元素

在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。

电玩女神/ 2022年07月26日 00:06/ 0 赞/ 313 阅读

相关伪类与伪元素比较说明

CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器伪类.jpg 伪元素种类.jpg 总结：伪类偏向于元素的

一时失言乱红尘/ 2022年06月02日 08:26/ 0 赞/ 228 阅读

相关伪类与伪元素的区别

W3C关于伪类伪元素的定义伪类：用于向某些选择器添加特殊的效果。伪元素：将特殊的效果添加到某些选择器上。明确两点： 1 都

太过爱你忘了你带给我的痛/ 2022年05月22日 03:05/ 0 赞/ 266 阅读

相关伪类与伪元素

一、伪类伪类包含两种：状态伪类（UI 伪类）和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素

野性酷女/ 2022年03月02日 04:08/ 0 赞/ 360 阅读

相关伪元素与伪类的使用

伪元素伪类听名字可能就会产生迷惑，其实从名称上我们也可以获取一些信息，伪元素——顾名思义是一个元素，伪类——与类class有关系，不是一个元素！在CSS1和CSS2中对伪类

傷城~/ 2021年09月20日 15:32/ 0 赞/ 434 阅读

相关伪元素（伪对象）和伪类的区别?

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，

淡淡的烟草味﹌/ 2021年09月16日 18:40/ 0 赞/ 479 阅读

相关 css中的伪类与伪元素

a:link { } / 未访问链接/ a:visited { }/ 已访问链接 / a:hover {

桃扇骨/ 2021年09月15日 06:14/ 0 赞/ 449 阅读