class选择器的权值是10,id选择器的权值是100,那我如果写11层class是不是能把id的样式顶掉?
!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权。
由于css是采用越接近越优先的原则,同一个定义,比如{margin: 2px;margin: 0px;},在IE和firefox中就会解释成{margin: 0px;};而使用了!important之后,!important对firefox有效,对IE无效。
故{margin: 2px !important; margin: 0px;},在firefox中解释为{margin:2px;},在IE中解释为{margin:0px;}
!important用来让firefox支持前面的定义,忽略后面的定义
!important对IE无效,IE依然会采用后面的定义,即后面的定义有效,前面的无效。
<style type="text/css"> div { height: 50px; background: black;} #blue { background: blue; } .a1{background:red!important; } </style> <div class="a1" id="blue" ></div>
执行步骤应该是从左向右扫描。
(1)先找到div块,div块有定义属性背景色为黑色,把div块背景色设置为黑色。
(2)接着扫描到class属性,对应有定义背景色为红色,并且优先级最高,覆盖div块中定义的属性,把背景色设置为红色。
(3)接着继续扫描到 id 属性,有定义背景色为蓝色,但是优先级没有比class属性定义的高,没法覆盖,所以背景色还是红色。
注:假如你把背景色为红色的!important标注去掉,最终结果会是蓝色。
比如这样写
<style type="text/css"> div { height: 50px; background: #CCCCCC; } #blue { background: blue; } div.a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11.a12.a13 { background: red; } </style> <div class="a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12 a13" id="blue"></div>
指定父级,优先级这点东西百度很多的详细介绍的