说说伪类与伪元素的不同

Posted sunshine

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了说说伪类与伪元素的不同相关的知识,希望对你有一定的参考价值。

说说伪类与伪元素的不同

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

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

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

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

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

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

 

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

 

 

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

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

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

 

伪类

SelectorMeaningCSS
: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属性的,类似于标签,但是伪类只能设置样式不能设置内容

 

 

以上是关于说说伪类与伪元素的不同的主要内容,如果未能解决你的问题,请参考以下文章

伪类与伪元素

伪类与伪元素

伪类与伪元素的区别

高手说一说css类与伪类,对象与伪对象的区别,简单易懂一些

伪类与伪元素

伪类与伪元素的区别