关灯
开启左侧

伪类及伪元素的区别

[复制链接]
doubleyong 发表于 2018-12-3 09:07:43 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
一、什么是伪类及伪元素?


1、什么是伪类?

官方给的解答是:伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素。
2、什么是伪元素?
官方给的解答是:伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。


这么一看是不是很懵圈?那就是了,接下来详细讲一下为什么会懵圈。


二、伪类及伪元素容易混淆的点:
很多朋友在css1及css2开始就已经接触到了前端,但是在css3之前,伪类及伪元素的写法都是加在:之后的。举个栗子:
这是一个伪类:
  1. a:hover {
  2. color:red;
  3. }
复制代码
这是一个伪元素:
  1. input:after {
  2. content:'哈哈哈'
  3. }
复制代码
这样就会出现写法一样造成有时候难以区分,因此在CSS3中将伪元素的写法更新成两个:的形式了。但是目前浏览器都还是识别css3之前的写法。但是建议大家还是将伪元素的写法更新成css3的写法:

  1. input::after {
  2. content:'哈哈哈哈'
  3. }
复制代码
三、伪类及伪元素的区别:
那么问题来了,两者的区别到底是什么呢?
区别的关键是:它们是否创造了新的元素。
我们看官方给的解答中:伪元素是虚拟的元素。因此伪元素是会新创建一个元素出来。例如上边栗子中的伪元素例子,会在input之后创建一个‘哈哈哈’出来。而官方解答中的伪类则是存在于DOM之中的,因此它不会创建出新的元素,而是会对元素进行修饰的而已。


综上就是伪类及伪元素的区别。
转自:http://bugshouji.com/shareweb/t634

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )