用样式的优先级解决浏览器兼容问题摘.doc

用样式的优先级解决浏览器兼容问题 摘 ? 用样式的优先级解决浏览器兼容问题(摘)2010-06-24 18：55在这之前先讲解特殊符号的含义--+_！important，这类特殊符号是针对不同浏览器识别的。打个比方，就象家长去幼儿园认领孩子，看到头上贴着+这个符号的，哦，这是ie家的孩子，firefox和opear家长是不认得的，当然符号不止3个，但有这3个就能满足大部分的需要了。 +加上该符号的样式只有ie才会认领 _加上该符号的样式只有ie6才会认领，ie7不会认领 ！important在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略！important字符串。在非同一条样式中即不同的大括号中{}标有！important的样式对所有浏览器均属优先认领。网上有说ie不认！important的，大错特错了。 例： style type=text/css .def{background：yellow；+background：blue；_background：red；} /style div class=defdd/div 结果：ie6下是red色，ie7下是blue色，firefox和opera下是yellow色 例： style type=text/css .def2{background：black！important；} .def1{background：yellow；+background：blue；_background：red；} /style div class=def1 def2″dd/div 结果：所有浏览器均black色 优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式 例： style type=text/css .def1{background：black；} .def2{background：yellow；} /style div class=def2 def1″dd/div 结果：所有浏览器均yellow色，注意：与class=引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。 优先原则二：id声明(即#开头的样式)class声明(即.开头的样式)标签声明(即类似div开头) 以上三种声明处于不同的量级，份量上，div开头相当于1克重，.开头相当于1公斤重，#开头相当于1吨重。 例： style type=text/css #bb{background：pink} .def{background：black；} div{background：yellow；} /style div id=bbclass=defdd/div 结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较，优先原则二各重量级别就不同了。 优先原则三：数量取胜。如果同一个样式声明即一个大括号{}由多个#.或div组成，则权重按出现符号的量级增加 比如：#bb#tt#dd{background：red}则重量等于3吨 #bb.tt ul.dd li{background：red}则重量等于1吨2公斤2克，这么精确的重量，就不需要举例了吧。 再次说明：优先原则一只适用两个样式声明同样重的情况 优先原则四：！important。相当于无限重量，在之前已经有说明，需要注意：ie下，在同一条样式声明即一个大括号中出现的！important会被随后出现的同名样式冲洗掉。 style type=text/css .def1{background：yellow！important；background：red；} .def2{background：green；} /style div class=def1 def2dd/div 结果：ie下，green色，background：yellow！important被后面的background：red冲洗了，而background：red与background：green的较量中，前者败在优先原则一之下。 优先原则五：近水楼台。div style=background：black/div直接写在元素体内的style优先级别最高！(仅次于！important)用重量来形容，可以定为百万吨量级。 style type=text/css .def1{background：red；} /style div class=def1style=background：blackdd/div 结果：black色。 style type=text/css .def1{background：red！important；} /style div class=def1style=backgroun