CSS的伪类/元素选择器,我也想你知道!!!

Posted °PJ想做前端攻城狮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS的伪类/元素选择器,我也想你知道!!!相关的知识,希望对你有一定的参考价值。


说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端)

作者:小只前端攻城狮
掘金:小只前端攻城狮的主页

GitHub:P-J27
CSDN:PJ想做前端攻城狮

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


场景引入

前端攻城狮们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:linkvisited等,伪元素较常见的比如:before:after等。这些在真实场景上出现的十分频繁。那么这些选择器和我们知道的常规选择器有什么不一样么?


概念

伪类和伪元素的具体概念如下:

  • 伪类:用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。

  • 伪元素:用于创建一些不在DOM树中的元素,并为其添加样式。例如,我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见这些文本,但是它实际上并不在DOM文档中。


伪类

我们来看看官方定义,首先看看CSS2中对伪类的定义

CSS 伪类用于向某些选择器添加特殊的效果

是不是一脸懵,单单看定义完全不懂在讲什么。从应用上,常见的是:伪类用于定义元素的特殊状态。例如,它可以用于:

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

伪元素

定义:CSS 伪元素用于设置元素指定部分的样式。

例如,它可用于:

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

伪元素和伪类区别

从上面两者的定义上,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档树外的元素。我们可以发现 伪类和伪元素最根本的区别:有没有创建一个文档树之外的元素。

不过需要注意的是,在新发布的CSS3规范中,在使用上有了更加严格的区分,要求使用双冒号(::)表示伪元素,以此来区分伪类和伪元素。我们都知道在CSS2时不论是伪元素还是伪类我们都是用的 单冒号(:).。虽然如此,但也依然支持单冒号的写法。w3c标准中说到,虽然CSS3标准要求伪元素使用双冒号的写法,但也依然支持单冒号的写法。为了向后兼容,我们建议你在目前还是使用单冒号的写法。

除此之外,伪类更加侧重丰富选择器的选择语法范围内元素的选择能力,伪元素更加侧重表达或者定义不在语法定义范围内的抽象元素

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

目前的伪类和伪元素选择器

截止目前,伪类有以下几种(来源w3c)

选择器例子例子描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 元素。
:disabledinput:disabled选择每个被禁用的 元素。
:emptyp:empty选择没有子元素的每个

元素。

:enabledinput:enabled选择每个已启用的 元素。
:first-childp:first-child选择作为其父的首个子元素的每个

元素。

:first-of-typep:first-of-type选择作为其父的首个

元素的每个

元素。

:focusinput:focus选择获得焦点的 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 元素。
:invalidinput:invalid选择所有具有无效值的 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 “it” 开头的

元素。

:last-childp:last-child选择作为其父的最后一个子元素的每个

元素。

:last-of-typep:last-of-type选择作为其父的最后一个

元素的每个

元素。

:linka:link选择所有未被访问的链接。
:not(selector):not§选择每个非

元素的元素。

:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个

元素。

:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个

元素,从最后一个子元素计数。

:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个

元素的每个

元素,从最后一个子元素计数

:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个

元素的每个

元素。

:only-of-typep:only-of-type选择作为其父的唯一

元素的每个

元素。

:only-childp:only-child选择作为其父的唯一子元素的

元素。

:optionalinput:optional选择不带 “required” 属性的 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 元素。
:read-onlyinput:read-only选择指定了 “readonly” 属性的 元素。
:read-writeinput:read-write选择不带 “readonly” 属性的 元素。
:requiredinput:required选择指定了 “required” 属性的 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素(单击包含该锚名称的 URL)。
:validinput:valid选择所有具有有效值的 元素。
:visiteda:visited选择所有已访问的链接。

截止目前伪元素有以下几种(来源w3c)

选择器例子例子描述
::afterp::after在每个

元素之后插入内容。

::beforep::before在每个

元素之前插入内容。

::first-letterp::first-letter选择每个

元素的首字母。

::first-linep::first-line选择每个

元素的首行。

::selectionp::selection选择用户选择的元素部分。

感谢阅读,希望能对你有所帮助,文章若有错误或者侵权,可以在评论区留言或在我的主页添加公众号联系我。

写作不易,如果觉得不错,可以「点赞」+「评论」 谢谢支持❤

以上是关于CSS的伪类/元素选择器,我也想你知道!!!的主要内容,如果未能解决你的问题,请参考以下文章

CSS的伪类/元素选择器,我也想你知道!!!

CSS的伪类/元素选择器,我也想你知道!!!

html 5 的CSS3新增的伪类选择器还包括哪些?

CSS选择器(包含CSS3新增的伪类和属性选择器等)

css选择器的1.13 UI元素状态伪类选择器

伪类选择器,伪类和伪元素的区别