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

2019-08-19123次阅读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中用百分号%占位符定义的样式,最终生成时是以群组选择器输出。群组选择器中如果有一个无效伪元素,则整个群组选择器的样式无效。

上一篇: js取数值的整数和小数  下一篇: 图片压缩工具imagemin  

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