css篇-面试题6-伪类与伪元素的区别

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

伪类: 用来选择那些不能够被普通选择器选择的文档之外的元素,比如:hover

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。

比如，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。

虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类

常见伪类::link,:visited,:hover,:active,:focus,:not(),:first-child,:last-child,:nth-child,:nth-last-child,:only-child,:target,:checked,:empty,:valid

伪元素:

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中

伪元素前面是两个冒号，E::first-line 伪元素。会创造出不存在的新元素，由于 css 对单冒号的伪元素也支持，单双冒号都支持,但实际上现在css3 已经明确规定了伪类单冒号，伪元素双冒号的规则,用于区分它们

::before/:before在被选元素前插入内容::after/:after 在被元素后插入内容，其用法和特性与:before相似::placeholder 匹配占位符的文本，只有元素设置了placeholder 属性时，该伪元素才能生效

对于伪元素 :before和 :after 而言，属性 content 是必须设置的，它的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL

总结

• 伪类和伪元素都是用来表示文档树以外的"元素"

• 伪类和伪元素分别用单冒号:和双冒号::来表示

• 伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到目的，如果是则是伪元素，反之则是伪类

公众号（ID：itclanCoder）

码能让您早脱菜籍，文能让您洗净铅华

  可能您还想看更多：

Js篇-面试题7-简单实现一下对象的深拷贝

手把手教你用vuepress搭建自己的网站(1)

Js篇-面试题6-聊一下强缓存与协商缓存

Js篇-面试题5-如果浏览器不支持 bind 函数,实现一个函数让其兼容

Js篇-面试题2-Promise 执行顺序问题