HTML5UI伪元素,解析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出现之前，对于设置列表序号样式比较有用；具体参见下面代码：

CSS Code复制内容到剪贴板

ol {

countercounter-reset: li;

}

ol>li {

position:relative;

padding-left: 2em;

line-height:30px;

list-style:none;

}

ol>li:before {

position:absolute;

top:8px;

left: 0;

height:16px;

width:16px;

line-height:16px;

text-align:center;

content:counter(li);

countercounter-increment: li;

border-radius: 50%;

background-color:#ccc;

font-size:12px;

color:#efefee;

}

PS：我们不能设置content: “

Benjamin

”，它不会解析按HTML代码片段解析，而会解析为字符串；

5. content: attr(attrName)

content可以利用attr函数获取属性值，尤其使用在伪类中比较方便。见如下代码：

CSS Code复制内容到剪贴板

.list li {

list-style:none;

margin-bottom:20px;

}

.list li span {

vertical-align:middle;

}

.list li:before {

content:attr(data-index);

display:inline-block;

width:20px;

height:20px;

text-align:center;

color:#fff;

vertical-align:middle;

background-color:#f00;

border-radius: 50%;

}

• 专注前端开发和用户体验
• 专注前端开发和用户体验
• 专注前端开发和用户体验
• 专注前端开发和用户体验
• 专注前端开发和用户体验

说了前面的话，下面说说IE中遇到的bug:

Bug描述：使用伪类实现”+”/”-“号图像切换时，通过增加和移除opened类来实现，但是在IE8中效果怪异，无法正确渲染，其它浏览器中正常：

CSS Code复制内容到剪贴板

.plus {

position:relative;

display:inline-block;

vertical-align:top;

width:20px;

height:20px;

margin-right:24px;

border:1pxsolid#fdaa47;

border-radius:3px;

overflow:hidden;

}

/* 横向 */

.plus:before {

content:'';

position:absolute;

top:10px;

left:3px;

width:14px;

height:1px;

background-color:#fdaa47;

display:block;

}

/* 纵向 */

.plus:after {

display:block;

content:'';

width:1px;

height:14px;

background-color:#fdaa47;

position:absolute;

left:10px;

top:3px;

}

.opened:after {

top: -30px;

}

当通过addClass(‘opened’)和removeClass(‘opened’),来切换加减号时：IE8浏览器中效果没有达到预期，部分样式无法覆盖，现解决方案如下:

JavaScript Code复制内容到剪贴板