css样式的优先级排序
选择器优先级:
通常我们可以将CSS的优先级由⾼到低分为六组:
1、⽆条件优先的属性只需要在属性后⾯使⽤ !important 。它会覆盖页⾯内任何位置定义的元素样式。IE 6不⽀持这个属性;
2、第⼆⾼位的优先属性是在html中给元素标签加style。由于该⽅法会造成CSS的难以管理,所以不推荐使⽤。
3、第三级优先的属性是由⼀个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。css 属性选择器
4、第四级的属性由⼀个或多个类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5、第五级由⼀个或多个类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
最低⼀级的选择器是为⼀个通配选择器,⽤*{margin:10px;}这样的类型来定义。
另外,可以⽤⼀句极为简单的话来描述CSS优先级问题:当⼀个拥有更多的⾼级别属性时,它的优先级就会⽐较⾼。如 #i100
*.c20 *.c10{} 的优先级就会⾼于 #i100 *.c10 div p span em{}
,这是由于前者拥有⼀个第三级和两个第四级的选择器⽽后者第三级和第四级的选择器各为⼀个,当然前者优先级会⽐较⾼。
相同级别的优先级:
当⽐较多个相同级别的优先级时,它们定义的位置将决定⼀切。下⾯从位置上将CSS优先级由⾼到低分为六级:
1、位于<head/>标签⾥的<style/>中所定义的CSS拥有最⾼级的优先权。
2、第⼆级的优先属性由位于 <style/>标签中的 @import 引⼊样式表所定义。
3、第三级的优先属性由<link/>标签所引⼊的样式表定义。
4、第四级的优先属性由<link/>标签所引⼊的样式表内的 @import 导⼊样式表定义。
5、第五级优先的样式由⽤户设定。
最低级的优先权由浏览器默认。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论