解析CSS中的伪元素及其与伪类的区别

伪元素
我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动，及新增一个元素（照顾到IE8浏览器这里使用单冒号）。但是content的可取值有哪些呢？
1. 字符串： content: “a string”- 注意：特殊字符必须使用unicode编码；
2. 图片： content: url(/path/to/benjamin.png) – 图片以原始尺寸插入，不能调整大小。因图片支持渐变，因此可以对伪元素使用渐变效果；
3. 无字符： content: “”- 这个在清除浮动和设置背景图片比较有用，我们可以设置背景图片的width和height，甚至我们可以使用background-size属性来调整背景图片大小；
4. 计数器： content: counter(li)- 在:marker出现之前，对于设置列表序号样式比较有用；具体参见下面代码：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表