首页 > 编程学习 > 伪元素和伪类的概念和区别

伪元素和伪类的概念和区别

发布时间:2022/11/17 8:09:01

目录

伪类

伪元素

 区别:

对于区别的解释:

伪类

这是菜鸟教程下方的一个笔记,看着多但是干货满满。

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志由于状态是动态变化的所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

个人解析:动态变化的???   比如使用:frist-child,当我们设定一个元素为红色时,同时我们又创建了一个新的节点,在该元素之前,那么红色将转移到新创建的节点身上,所以并不是固定的。相反使用id,class等直接绑定就是固定的,再比如:link,这个样式也是动态的,可能发生也可能不发生(如果点击了,或者悬浮了就是另外一种状态了)——其实针对的是某一个元素节点(具体哪一个可能状态变化也可能节点变化)


常见的伪类

属性描述
:active向被激活的元素添加样式
:focus向拥有键盘输入焦点的元素添加样式
:hover当鼠标悬浮在元素上方时,向元素添加样式
:link向被访问的链接添加样式
:visited向已被访问的链接添加样式
:first-child向元素的第一个子元素添加样式
:lang向带有指定lang属性的元素添加样式



伪元素

与伪类针对特殊状态的元素不同的是,伪元素是对 元素中的 特定内容 进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

个人解析:伪元素是对元素节点特定内容的操作,普通选择器是无法对元素内容操作的,这就是伪元素的特点,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行...

常见的伪元素:

属性描述
::after在元素之后插入内容
::before在元素之前插入内容
::first-letter选中该元素的首字符
::first-line选中该元素的首行
::selection选择用户选择的元素部分

 区别:

伪类伪元素
:: 或 :
没有创造新元素(抽象)创造了新元素(抽象)
主要针对的是元素节点主要针对的是元素的内容

对于区别的解释:

        举例:我们要实现如下功能

 使用伪类:

我们可以看到相对于不使用伪类,并不需要生成新的元素节点(抽象)

使用伪元素如何实现?

 但是如果不使用伪元素,如何实现?

 这里我来解释一下为什么要加span这种标签而不是直接给h4带类名,原因是因为,我们要模拟伪元素的状态,伪元素是针对元素内容的改变,如果我们想要内容的第一个或者第一个字改变颜色,直接加类名是无法实现的。

我们发现,如果想要实现和伪元素相同的效果,是需要增加节点元素的,实际上伪元素就抽象了增加了一个节点。

Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式