一次css错误排查中再次认识到::伪元素

css中单冒号和双冒号的区别

• 伪类偏向于元素的动作行为，伪元素偏向于元素的属性。css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
• 对于CSS2之前已有的伪元素，比如单冒号:before和css3中双冒号::before作用是一样的。
• 双冒号伪元素浏览器支持IE9+。如果网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果还要兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

错误排查过程

1、CSS样式在IE7下都是正常的，就IE8下有问题，排查中发现只要sass中用百分号%占位符定义的样式在IE8下全不起作用。

%ico{
	background:url(../images/recharge_ico.png) no-repeat;
}

%w980{
	width:980px;
	@extend %ma;
}

.recharge-way{
	...
	span{
		....
		&.cur{
			...
			&::after{
				content:'';
				@extend %pa;
				right: 0;
				bottom: 0;
				$width:16px;
				width: $width;
				height: $width;
				@extend %ico;
				background-position:-109px -241px;
			}
		}
	}

}

.....

2、莫慌，我们先查看一下生成的css样式

.recharge-list li,.recharge-way span.cur::after,.rg-ertps i,.serviceLink,.weixin,.yinlian,.zhifubao{background:url(../images/recharge_ico.png) no-repeat}

3、嗯，哦，好像找到问题所在了，之前一篇CSS选择器链或组中出现无效的伪选择器会怎样让我印象深刻。

总结

sass中用百分号%占位符定义的样式，最终生成时是以群组选择器输出。群组选择器中如果有一个无效伪元素，则整个群组选择器的样式无效。