关灯
首页
论坛首页
大咖专栏
大咖专栏
热点资讯
热点资讯
精彩活动
精彩活动
关于
关于
本版
文章
帖子
用户
登录
注册
快捷登录
投稿
EOIT论坛
›
社区交流
›
WEB前端
›
伪类及伪元素的区别
返回列表
伪类及伪元素的区别
[复制链接]
doubleyong
发表于 2018-12-3 09:07:43
|
显示全部楼层
|
阅读模式
一、什么是伪类及伪元素?
1、什么是伪类?
官方给的解答是:
伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素。
2、什么是伪元素?
官方给的解答是:
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。
这么一看是不是很懵圈?那就是了,接下来详细讲一下为什么会懵圈。
二、伪类及伪元素容易混淆的点:
很多朋友在css1及css2开始就已经接触到了前端,但是在css3之前,伪类及伪元素的写法都是加在:之后的。举个栗子:
这是一个伪类:
a:hover {
color:red;
}
复制代码
这是一个伪元素:
input:after {
content:'哈哈哈'
}
复制代码
这样就会出现写法一样造成有时候难以区分,因此在CSS3中将伪元素的写法更新成两个:的形式了。但是目前浏览器都还是识别css3之前的写法。但是建议大家还是将伪元素的写法更新成css3的写法:
input::after {
content:'哈哈哈哈'
}
复制代码
三、伪类及伪元素的区别:
那么问题来了,两者的区别到底是什么呢?
区别的关键是:
它们是否创造了新的元素。
我们看官方给的解答中:伪元素是虚拟的元素。因此伪元素是会新创建一个元素出来。例如上边栗子中的伪元素例子,会在input之后创建一个‘哈哈哈’出来。而官方解答中的伪类则是存在于DOM之中的,因此它不会创建出新的元素,而是会对元素进行修饰的而已。
综上就是伪类及伪元素的区别。
转自:
http://bugshouji.com/shareweb/t634
回复
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
doubleyong
版主
0
关注
13
粉丝
47
帖子
发送私信
收听TA
Ta的主页
热门图文
微信小程序插件系列(一)日历插件
中国平安产品经理和app开发打架视频事件始
如何有效的学习Web前端开发?
微信小程序-音乐播放器详解
零基础小白如何学习UI设计
如何从零开始学Java
热门帖子
WEB前端
微信小程序插件系列(一)日历插件
新手报到
中国平安产品经理和app开发打架视频事件始
WEB前端
如何有效的学习Web前端开发?
WEB前端
微信小程序-音乐播放器详解
UI设计
零基础小白如何学习UI设计
Java大数据
如何从零开始学Java
新手报到
论坛攻略-----如何获得积分与安仔币、快速
WEB前端
常见的js设计模式,面试必备
排行榜
日
周
月
1
为什么设计感知比设计解决方案更重要?
曾经有一位顾问,问亨利·福特(福特公司创始人),为什么他每年要付5万美元给一个每
0
0
2
搜索引擎的使用技巧
现在,有什么你不知道的,都可以通过互联网来学习了解。可互联网的知识太多了,如何在
116
0
3
10个你不知道的键盘快捷方式小窍门
1. Windows + D 回到桌面 2. Ctrl+Shift+T 挨个打开之前关掉的网页 (此快捷方式很
128
0
4
css 中控制继承的四个特殊值
CSS为处理继承提供了四种特殊的通用属性值: [*]inherit: 该值将应用到选定元素的属
150
0
5
两年前,我从百度离职了
两年前,我从百度离职了。 我曾经认为,我永远不会成为一个好员工,因为我太独、太挑
173
0
6
SpringBoot静态资源加载原理
springboot配置静态资源方式是多种多样,接下来介绍其中几种方式,并解析一下其中的原
196
0
7
戒掉情绪,你就成功了一半
戒掉情绪,你就成功了一半。 01 都说成年人的世界,没有“容易”二字,连发泄情绪都要
188
0
8
✿✿✿国信安教育百杰186部java班级信息✿
✿✿✿国信安教育百杰186部java班级信息✿✿✿ 班 级:百杰186部 专业方向:java
212
0
9
百杰185部UI设计开班啦!
232
0
10
百杰185部UI设计开班啦!
216
0
1
微信小程序插件系列(一)日历插件
近期有玩小程序的朋友问我在小程序中如何引用插件。那么近期就给大家推荐几款实用的微
4297
1
2
中国平安产品经理和app开发打架视频事件始
据爆料,中国平安一个产品经理和APP开发人员在办公室直接打起来了,据称是产品经理向A
3937
2
3
如何有效的学习Web前端开发?
一个好的Web前端工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高
3501
8
4
微信小程序-音乐播放器详解
大家好,上一篇分享了如何获取酷狗的音乐资源,今天给大家聊一下微信小程序中音
2882
2
5
零基础小白如何学习UI设计
用户体验至上的时代已经来临。能够吸引到用户的界面,都是UI设计师的精心设计的功劳。
2800
3
6
如何从零开始学Java
虽然Java面象对象很多东西都是被封装好的直接用,相对其他语言没那么复杂,但是学的东
2640
1
7
论坛攻略-----如何获得积分与安仔币、快速
国信安论坛——EOIT上线啦!!!赶快来玩转论坛,获取积分,领取礼品哟!!! 积分与
2378
0
8
常见的js设计模式,面试必备
每个JS开发者都力求写出可维护、复用性和可读性高的代码。随着应用不断扩大,代码组织
2208
19
9
放好自己的心态!心态可以改变命运!
1、人总是在一个阶段才会明白一个阶段的事。当你跨过这个阶段就懂得某些事的时候,不
2137
0
10
2018年网页设计趋势
几乎所有的设计项目当中,设计师几乎都需要借助设计来尽量抓住用户的注意力
2111
2
1
为什么设计感知比设计解决方案更重要?
曾经有一位顾问,问亨利·福特(福特公司创始人),为什么他每年要付5万美元给一个每
0
0
2
搜索引擎的使用技巧
现在,有什么你不知道的,都可以通过互联网来学习了解。可互联网的知识太多了,如何在
116
0
3
10个你不知道的键盘快捷方式小窍门
1. Windows + D 回到桌面 2. Ctrl+Shift+T 挨个打开之前关掉的网页 (此快捷方式很
128
0
4
css 中控制继承的四个特殊值
CSS为处理继承提供了四种特殊的通用属性值: [*]inherit: 该值将应用到选定元素的属
150
0
5
两年前,我从百度离职了
两年前,我从百度离职了。 我曾经认为,我永远不会成为一个好员工,因为我太独、太挑
173
0
6
SpringBoot静态资源加载原理
springboot配置静态资源方式是多种多样,接下来介绍其中几种方式,并解析一下其中的原
196
0
7
戒掉情绪,你就成功了一半
戒掉情绪,你就成功了一半。 01 都说成年人的世界,没有“容易”二字,连发泄情绪都要
188
0
8
✿✿✿国信安教育百杰186部java班级信息✿
✿✿✿国信安教育百杰186部java班级信息✿✿✿ 班 级:百杰186部 专业方向:java
212
0
9
百杰185部UI设计开班啦!
232
0
10
百杰185部UI设计开班啦!
216
0
作者专栏
142
安仔
139
意大利炮
114
小川
100
大菲
55
唐唐
54
丘丘
关闭
站长推荐
/1
论坛攻略-----如何获得积分与安仔币、快速升级
国信安论坛——EOIT上线啦!!!赶快来玩转论坛,获取积分,领取礼品哟!!!
查看 »
快速回复
返回顶部
返回列表