一、伪元素（Pseudo-element）
伪元素就是在元素中装模作样的功能。这样一整，元素就能好看起来或者换个样式，比直接在网址代码里面加标签方便多。用逗号分隔的双冒号“::”来标示它们，比如说这个常被用到的组合”::before”和”::after”。
1.1创建虚拟子元素
你要是用假儿子（伪元素）这个东东，就给它起个名字。比如”::before”这个伪元素，就能给某个元素前面加装饰。
1.2设置伪元素的样式
给伪元素添样式跟弄普通元素差不多，直接用content打字，color调色，跟喝水一样轻松。
element::before {
content: "Hello";
}
1.3伪元素的使用场景
虚火元素在编程里挺好用的。例如，用它改改元素里的内容，加个箭头，小图标呀什么的；还能给处理中的元素添加新样式，比如换个背景色，加个边框啊；最牛逼的是，你还能用它搭出个大盒子，统统收藏起来，网页的设计就随你怎么整了！
二、伪类（Pseudo-class）
其实，伪类比伪元素还要牛逼！这东西就是专门为了搞定某些元素在不同情况下如何呈现的问题才搞出来的。就好像换装一样，我们可以让元素变得五颜六色，只要用CSS，那种以冒号开头的样式就行了，看起来就像这个样子:”。
2.1常用的伪类
说到伪类，你们应该懂？反正就那么几个，每个都有各自的作用。比如”:hover”这是让鼠标移上去后才起效的；”:active”是你一点就带动出来的效果；”:first-child”可以帮你选中网页上的第一个子元素。只要好好利用它们，就能满足不同的交互需求！
2.2伪类的使用场景
所谓伪类，就是为了让大家用得更爽快而设定的小窍门。比如你把鼠标放在链接上，它会变色哦;按个钮就能换个造型嘞。而且和表单搭配在一起，还能靠换样式来提升使用感呢!
三、伪元素与伪类的异同点
试着用一次就能发现了，不管是伪元素还是伪类，都能让页面变得美美的，不过，还是有那么点小区别的咯。
3.1相同点
别急，我们一起来找找这两种元素的共性！不管是假元素还是假类别，其实都是为了让网页看起来更好，用CSS来选择和设定就行！
3.2不同点
你们知道这哥俩儿咋回事？首先，语句用法有点区别，比如有些人就喜欢用“::”这种两个冒号的写法，但是另一些人就觉得用“;”这种单个冒号看着顺眼；另外那个伪元素和伪类？它们就像两个好基友，一个能给你生成一个假的副产品来装饰或是嵌入内容，另一个就负责在适当时候让选择器更好地发挥作用；但要注意的是，浏览器对各类选择器的消化能力还是有差异的，所以兼容性的问题得多加留心。
主要就是看你想要啥结果！选个自己觉得最好的那方式就OK了。
p::before {
content: "(";
color: red;
}
a:hover {
color: blue;
}
看完CSS的那些神秘元素和类型，是不是有点懵逼？别担心，下面我就来给你细说说，搞清楚后，结合我演示的例子，你就知道哪些时候该怎么用。
评论0