CSS选择符权重、CSS Sprite技术和CSS hack

一、在实际使用中，使用类要注意：多用组合，少用继承。

上下margin重合问题：margin是个特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合。

如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（如mt10/mb20）模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom之一。

二、CSS选择符权重：

当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。

权重规则：HTML标签的权重是1，class的权重是10，id的权重是100。例如，strong.demo的权重是10+1=11。

相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。（注意：是样式中定义该选择符的先后，而不是html中使用先后）

三、CSS Sprite注意点：

1.技术是针对作为背景的图片，对与html文档<img src=""/>设置的图片，不能合并到CSS Sprite大图，否则图片会影响页面可读性。

2.对于横向和纵向都平铺的图片，也不能使用CSS sprite；如果是横向平铺的，只能将所有横向平铺的图合并成一张大图，只能竖直排列，不能水平排列；如果是纵向平铺的，只能将所有纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列。

3.CSS sprite的图片定位可以使用bg2css小工具快速定位background-positon坐标，有利于提高开发速度。

4.好处是减少HTTP请求数减轻服务器压力，缺点是降低开发效率、增加维护难度。CSS Sprite大图中每个图片的维护改动都要谨慎，防止影响周围的图片。

网站是否使用CSS Sprite技术，主要取决于网站流量。

四、CSS hack

1.IE条件注释法

该方法安全性好，但是不利于开发维护。比如涉及到针对不同版本IE的css。

<!--[if IE]><![endif]-->         只在IE下有效
<!--[if IE 6]><![endif]-->      只在IE6有效
<!--[if gt IE 6]><![endif]-->  只在IE6以上版本有效

注意：结合lte、lt、gte、gt、!关键字使用。

2.选择符前缀法

“*html” 前缀只对IE6生效  "*+html"前缀只对IE7生效
.test{width:80px;}           /*IE 6 7 8*/
*html .test{width:70px;}  /*IE6*/
*+html .test{width:60px;}/*IE7*/

缺点：不能保证IE9，10不识别*html,*+html，有向后兼容风险。

3.样式属性前缀法：

如“_”只在IE6下生效，“*”在IE6和IE7下生效。同样有向后兼容隐患。
.test{width:80px;*width:70px;_width:60px;}

可用于内联样式：<div style="width:80px;*width:70px;_width:60px;"></div>

由于IE条件注释法不利于开发维护，实际中常用的hack方法常常是后两者。

五、超链接访问后hover样式不出现的问题

原因：a:hover和a:visited顺序不对。

四种状态的正确顺序：
a:link
a:visited
a:hover
a:active

为便于记忆，叫做love hate原则，即l(link)ov(visited)e h(hover)a(active)te。

转载来自：http://blog.csdn.net/freshlover/article/details/7569875