一、CSS伪类
二、CSS伪元素
三、区别
单冒号（:）用于CSS伪类；双冒号（::）用于CSS伪元素；本质上一个是类一个是元素；。
1.伪元素：被用来创建 DOM 树既有的元素之外的抽象元素；
其实在 DOM 树中并不存在，只是逻辑上存在所以我们抽象出来的一个元素，就是假设DOM树上有这个元素；
伪元素和他前面的元素是元素和元素之间的位置关系，是一个平级的，是直接作用在DOM树上的。
伪元素既然带一个“元素”，说明它和 p ，a ，h1 等一样，可以包裹住页面的一部分内容并对其中的内容施加一定的影响。
2.伪类：通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
其实是文档树的某个元素上并没有某个类，但是就好像在某种条件下，这个元素上被声明了这个类一样；
作用在DOM树的元素上面，和Class作用一样；
最典型的就是作用在 a 标签上的伪类 :hover，我们并没有在 a 元素上声明一个叫 hover 的类，但是当我们把鼠标悬停在 a 元素上时，这个 a 元素上就好像有一个 hover 类，代表光标悬停在这个 a 元素上那个时间点的 DOM 树中的 a 元素。
四、使用
1.利用 after 清除浮动
.clearfix:after{content:".",display:block;height:0;clear:both;}
.clearfix{content:""}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.header{content:""}
.header::after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
.myRight,.myLeft{ float:left;width: 200px; height: 200px; background: #ddd;}
.myRight{ background: red;}
.footer{background:green;width:500px;height:80px;}
</style>
</head>
<body>
<div class="header">
<div class="myLeft">测试1</div>
<div class="myRight">测试2</div>
</div>
<div class="footer"></div>
</body>
</html>清除浮动效果
未清除浮动，绿色背景的div会浮动上来，被前面的div遮盖；效果
2.伪元素与 css sprites 雪碧图
雪碧图就是将多个小图片icon合为一张图，从而减少http请求。
但是在制作雪碧图的过程中，或者现在很多的打包工具自动生成的雪碧图，都存在着需要为每个 icon 需要预留多少边距的问题。看看下图：
变为 
譬如上面这种情况（假设按钮中的图标是采用了雪碧图），产品某天突然要求按钮从状态左变为状态右，那么雪碧图原先预留的位置边距肯定就不够了，导致其他图形出现在按钮中。
而我们通常不会为了一个小 icon 多添加一个标签（不符合语义化）。
所以通常这种情况需要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为原本 icon 的大小，再利用绝对定位定位到需要的地方，这样无论雪碧图每个 icon 的边距是多少，都能够完美适应。
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
