伪类和伪元素

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

伪类伪元素,相信很多人开始都分不清伪类和伪元素的区别,其实仔细想一下,我们从字面意思就能够很好的理解这两层意思,看到不少视频讲师,什么滴滴,腾讯,这些大牛讲课也总是口误,混淆这些概念!

伪类

当我们指定某一元素被选中后的特殊状态时,一个 CSS 伪类 会被作为一个关键词添加到选择器上. 例如 :hover 会在当用户鼠标指针悬停在由选择器指定的元素上时应用一个样式.

伪类连同伪元素一起, 他们允许你不仅仅是根据文档DOM树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(:visited, 为例), 同样的,可以根据内容的状态 (例如 在一些表单元素上的 :checked ), 或者鼠标的位置 (例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式.

伪类语法

1
2
3
元素名:伪类{
属性:值
}

伪类事例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
css 2.0
:link
:visited
:active
:hover
:focus
:first-child
css3.0
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled

伪元素

就像 pseudo classes (伪类)一样, 将伪元素添加到选择器中允许在不添加额外声明的情况下为文档的某些部分添加样式。 例如,使用 ::first-line 伪元素会匹配由选择器中所指定的元素的第一行。

语法

元素名:伪元素 {
属性: 值;
}

事例

1
2
3
4
5
6
::after
::before
::first-letter
::first-line
::selection
::backdrop

可能大家看到了伪元素::after 我们都知道还有一个:after,这两个有什么区别呢?其实::after伪元素是css3新加的,目的就是为了区分伪类与伪元素,目前css2.0的伪元素也是可以用的。

总结

伪元素伪类,一个是类添加改变修正样式,一个是元素,增加一个元素,但是其实这些都是本身不存在的。

参考文献 :
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements