说说伪类与伪元素的不同

Posted 2020-10-30 sunshine

说说伪类与伪元素的不同

伪元素用来创建html文档语言指定之外文档树的抽象层。比如HTML没有提供文档元素内容的首字母或第一行的访问机制。CSS伪元素允许作者引用这些除此之外无法访问的信息。伪元素还提供一种方法来引用不存在于文档中的内容。（比如，::before 和 ::after ）。

一个伪元素由2个冒号（::）加上伪元素的名字所定义。

每个选择器中只能出现一个伪元素，并且只能出现在选择器主体的后面。

伪元素默认是inline样式的，通过设置成绝对定位，可强制改变display为block，这样对其设置宽高才能生效。

注意：后续版本可能会允许每个选择器中出现多个伪元素。

从上面的定义，我们可以得知伪元素事实上创建了一个虚拟的元素，在这个虚拟元素上可以应用一般CSS规则乃至伪类选择器。伪元素并不选定（过滤）元素，实际上它们选定（过滤）内容（::first-line,::first-letter），把内容包装到一个虚拟的容器中，并可以为该容器添加样式。或创建内容（::before,::after，然后包装到一个虚拟容器中，作者可以为此容器添加样式。

 

伪元素实际上是1：选定（过滤）选择器的指定元素的内容，把内容包装到一个虚拟的容器中，并可以为该容器添加样式。2:在选择器指定的元素前后创建内容，该内容也包装到一个虚拟的容器中，并不存在与文档中，可以为容器添加样式

 

 

Selector	Meaning	CSS
::first-letter	选择指定元素的第一个单词	1
::first-line	选择指定元素的第一行	1
::after	在指定元素的内容前面插入内容	2
::before	在指定元素的内容后面插入内容	2
::selection	选择指定元素中被用户选中的内容	3

伪类    CSS中的类（class）是为了方便过滤（即选择）元素，以给这类元素添加样式，class是定义在HTML文档树中的。

但是这在一些情况下是不够用的，比如用户的交互动作（悬停、激活等）会导致元素状态发生变化，class对这些动态变化无能为力。

 

伪类

Selector	Meaning	CSS
:active	选择正在被激活的元素	1
:hover	选择被鼠标悬浮着元素	1
:link	选择未被访问的元素	1
:visited	选择已被访问的元素	1
:first-child	选择满足是其父元素的第一个子元素的元素	2
:lang	选择带有指定 lang 属性的元素	2
:focus	选择拥有键盘输入焦点的元素	2
:enable	选择每个已启动的元素	3
:disable	选择每个已禁止的元素	3
:checked	选择每个被选中的元素	3
:target	选择当前的锚点元素	3
:first-of-type	选择满足是其父元素的第一个某类型子元素的元素	3
:last-of-type	选择满足是其父元素的最后一个某类型子元素的元素	3
:only-of-type	选择满足是其父元素的唯一一个某类型子元素的元素	3
:nth-of-type(n)	选择满足是其父元素的第n个某类型子元素的元素	3
:nth-last-of-type(n)	选择满足是其父元素的倒数第n个某类型的元素	3
:only-child	选择满足是其父元素的唯一一个子元素的元素	3
:last-child	选择满足是其父元素的最后一个元素的元素	3
:nth-child(n)	选择满足是其父元素的第n个子元素的元素	3
:nth-last-child(n)	选择满足是其父元素的倒数第n个子元素的元素	3
:empty	选择满足没有子元素的元素	3
:in-range	选择满足值在指定范围内的元素	3
:out-of-range	选择值不在指定范围内的元素	3
:invalid	选择满足值为无效值的元素	3
:valid	选择满足值为有效值的元素	3
:not(selector)	选择不满足selector的元素	3
:optional	选择为可选项的表单元素，即没有“required”属性	3
:read-only	选择有"readonly"的表单元素	3
:read-write	选择没有"readonly"的表单元素	3
:root	选择根元素	3

为此，CSS引入了伪类（pseudo-class）的概念用来支持根据文档树以外的信息来过滤元素的能力。

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

伪类是一个抽象类，本质上还是一个类，因此其主要作用仍然是用来选择元素而后设定具体的样式。

伪类的定义使用：单冒号加上名称，如 mydiv:hover。

伪类实际上是1：获取不存在与DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取，伪类选择元素的依据不是名称、属性或内容，而是根据特征（比如状态或顺序）。（:lang除外）2：不能被常规CSS选择器获取到的信息。:first-child;

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

 

 

前面一节和本节内容分别详细讲述了伪类和伪元素的使用，我们应该已经大致理解了两者的异同点，这里再总结一下：

 

两者都不存在于HTML文档树中，都是为了支持依靠文档树之外的信息来进行格式化。

1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素本质上是创建了一个有内容的虚拟容器；
3. CSS3中伪类和伪元素的语法不同；
4. 可以同时使用多个伪类，而只能同时使用一个伪元素；

 

1. 伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。什么是伪类呢？简单点说，就是你没定义这个类，但它确实作为一个类来使用。

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

 

 

简单理解，伪元素是可以设置content属性的，类似于标签，但是伪类只能设置样式不能设置内容