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

    }   
    .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%;   
    }   
</style>   
<ul class="list">   
    <li data-index="1"><span>专注前端开发和用户体验</span></li>   
    <li data-index="2"><span>专注前端开发和用户体验</span></li>   
    <li data-index="3"><span>专注前端开发和用户体验</span></li>   
    <li data-index="4"><span>专注前端开发和用户体验</span></li>   
    <li data-index="5"><span>专注前端开发和用户体验</span></li>   
</ul>  

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

CSS Code复制内容到剪贴板

.plus {   
    position: relative;   
    display: inline-block;   
    vertical-align: top;   
    width: 20px;   
    height: 20px;   
    margin-right: 24px;   
    border: 1px solid #fdaa47;   
    border-radius: 3px;   
    overflow: hidden;   
}