说说伪类与伪元素的不一样

说说伪类与伪元素的不一样

伪元素用来建立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属性的，相似于标签，可是伪类只能设置样式不能设置内容