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

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

伪元素
我们知道随着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: “<h2>Benjamin</h2>”，它不会解析按HTML代码片段解析，而会解析为字符串；
5. content: attr(attrName)
content可以利用attr函数获取属性值，尤其使用在伪类中比较方便。见如下代码：

CSS Code复制内容到剪贴板

<style type="text/css">
.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%;
}
</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;
}
/* 横向 */
.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复制内容到剪贴板

<div class="parent">
<i class="plus"></i>
</div>
<script type="text/javascript">
$('.parent').on('click', function() {
var $i = $(this).find('i'),
className = $i.attr('class');
className = /opened/.test(className) ? 'plus' : className +' opened';
$i.replaceWith('<i class="'+ className +'""></i>');
});
</script>

伪类和伪元素的异同
1. W3C CSS 2.1 Selectors
对伪类和伪元素没有做出区分，都是使用一个冒号
比如
伪类:first-child，
伪元素:first-line
PS：在该规范中明确提到了a链接的几种伪类的书写顺序：
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ‘color’ property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

2. CSS Selectors Level 3
该规范中为伪类和伪元素做了区分，伪类使用单冒号，伪元素开始使用双冒号。
比如
伪类:first-child
伪元素::first-line、::first-letter、::before、::after
CSS 3在CSS2.1的基础上增加了不少伪类:target、UI元素状态的伪类:checked等、结构性伪类:nth-child()等，具体可以看规范。

3. CSS Selectors Level 4草案
该草案中又增加了很多新的伪类，比如与input控制状态、值状态、值校验相关的伪类，树形结构的伪类，网格结构的伪类等。

4. CSS Pseudo-Elements Module Level 4——W3C First Public Working Draft, 15 January 2015
增加了一些伪元素，如：
Selecting Highlighted Content: the ::selection, ::spelling-error, and ::grammar-error pseudo-elements，
Placeholder Input: the ::placeholder pseudo-element。

5. 常见应用
伪类：
1) a链接样式
2) 隔行变色
伪元素：
1) 最常见的使用伪元素after清除浮动，
.fix{*zoom:1;}
.fix:after,.fix::after{display: block; content: “clear”; height: 0; clear: both; overflow: hidden; visibility: hidden;}
2) letter-spacing+first-letter实现按钮文字隐藏
3) 首行、首字母样式

上一篇：打造最美CSS多级下拉横向导航菜单代码
下一篇：老生常谈CSS中的长度单位