这一次,彻底搞定伪类和伪元素的区别-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 很多人经常对CSS中的伪类和伪元素分不清楚,或者将这两者混为一谈,今天让我们来了解下这两者都有哪些区别。在CSS3之前是没有伪元素与伪类的区别的,直到CSS3才将这二者区分开来。
很多人经常对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。

伪类和伪元素的区别

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章