伪类与伪元素

看到这几个词,有点傻傻分不清,故总结一下。

 

那么什么是伪类呢?之所以说它是“伪”的,不是为了赶时髦,其实可以理解为,它不是真正的一类对象,而是一类对象的某种状态。

比如一类链接<a>的hover状态,就是个“伪”的类。

而伪对象呢,可以理解为本身不是单独的全新的对象,而是将已有的某些对象中划分出来一些,所以是“伪”对象。

伪类:

:link :hover :active :visited :focus :first-child :first :left :right :lang

伪元素:

:first-letter :first-line :before :after


CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化

这么说很抽象,其实就是为了描述一些现有CSS无法描述的东西。

 

一个伪类 first-child 举例,这个容易混淆:
<ul>
<li></li>
<li></li>
</ul>
如果我要描述 ul 的第一个元素,我无须嵌套新的元素,我只须给第一个已经存在的 li 添加一个类名就可以了:

<ul>
<li class="first-child"></li>
<li></li>
</ul>

 

最为混淆的,可能是大部分人都将 :before 和 :after 这样的伪元素
CSS Selector Level 3 为了区分这两者的混淆,而特意用冒号加以区分:

伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line
因为低版本IE对双冒号的兼容问题,几乎所有的CSSer在写样式的时候都不约而同的使用了单冒号。

归根结底,会用就行,毕竟标准还不完善,而且看了很多资料也是云里雾里,不知所以然就做好知其然吧。

 

原文地址:https://www.cnblogs.com/nostic/p/5746249.html