很多人经常对CSS中的伪类和伪元素分不清楚,或者将这两者混为一谈,今天让我们来了解下这两者都有哪些区别。在CSS3之前是没有伪元素与伪类的区别的,直到CSS3才将这二者区分开来。
为什么要引入伪类和伪元素?
CSS之所以要引入伪类和伪元素是为了格式化文档树之外的信息,也就是说,伪类和伪元素是用来修饰不在文档树的部分,比如第一句话中的第一个字母或列表中的第一个元素。
什么是伪类?
伪类表示的是被选择元素的某种状态,例如hover。
伪类的分类
状态性伪类
状态性伪类是根据元素当前的状态进行选择的,当元素进入某种状态时呈现一种样式,进入另一种状态时呈现另一种样式。
典型的状态性伪类有:
- :link 应用与未被访问过的链接。
- :hover 应用于鼠标悬停到的元素。
- :active 应用于被激活的元素。
- :visited 应用于被访问过的链接,与:link互斥。
- :focus 应用于拥有键盘输入焦点的元素。
结构性伪类
CSS3新增选择器,利用DOM树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使得文档结构更加简洁。
典型的结构性伪类有下面的例子:
- div:first-child 选择属于其父元素的第一个子元素的每个div元素。
- div:last-child 选择属于其父元素最后一个子元素的每个div元素。
- div:nth-child(n) 选择属于其父元素的第n个子元素的每个div元素。
什么是伪元素?
伪元素表示的是被选择元素的某个部分,这个部分看起来像一个独立的元素,例如::before和::after。
伪类和伪元素的区别
伪类是操作文档中已有的元素,而伪元素则是创建了一个不在文档树中的元素,并为其添加样式。