这一次,彻底搞定伪类和伪元素的区别

很多人经常对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。

伪类和伪元素的区别

伪类是操作文档中已有的元素,而伪元素则是创建了一个不在文档树中的元素,并为其添加样式。

上一篇:多activity中退出整个程序


下一篇:《实践篇--阿里迁云工具使用》