3回答

• 

  丶小八戒

  2015-06-26 12:22:47

  !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标注去掉，最终结果会是蓝色。

  4 1

  丶小八戒 回复小慧_

  会加载css样式 但是渲染顺序应该是对应的标签上从左往右扫描吧（个人理解）

  2015-07-24 16:10:12

  共 4 条回复 >

• 

  獨壹廡薆

  2015-06-26 10:18:40

  比如这样写
  

  <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>

  
  

  1 0

  Dragon

  我是指加上父级的前缀，你所说的权值在真正做项目中没有人会刻意去衡量，记住那么几点 同级节点 id 大于 class ，加上父级 id 可以 大于子集的id, 也不会随意添加一堆class <style type="text/css"> p { height: 50px; background: #CCCCCC; } #blue { background: blue; } #oop .a1 { background: red; } </style> <div id="oop"> <p class="a1" id="blue">123</p> </div>

  2015-06-26 10:34:10

  共 1 条回复 >

• 

  Dragon

  2015-06-26 10:18:09

  指定父级，优先级这点东西百度很多的详细介绍的

  0 0