ie6对important的纠结

在其它比较标准的浏览器都很好的支持important时，让我们蛋疼的ie又开始发威。经过测试发现ie6在对important的处理是如此的纠结，请看如下测试：

1.在测试是否可以覆盖内联样式

css代码：

1 .test{
2     background:black !important;
3  }

html代码：

1 <div class="test" style="background:red;">
2     this is test div
3  </div>

测试结果如下：

背景为黑色

结论：important的样式是可以覆盖内联样式的

2.测试在css中是否会覆盖其它样式

css代码:

1 .test{
2     background:black !important;
3     background:red;
4  }

html代码：

1 <div class="test">
2     this is test div
3  </div>

测试结果：

背景为红色

结论：important的样式不能覆盖同在一个选择器中的样式

3.再测试不在同一个选择器中的情况

css代码：

1 .test{
2     background:black !important;
3  }
4 .test{
5     background:red;
6  }

html代码：

1 <div class="test">
2     this is test div
3  </div>

测试结果：

背景为黑色

结论：important的样式可以覆盖不在同一个选择器中的样式

4.测试两个important的情况

1 .test{
2     background:black !important;
3  }
4 
5 .test{
6     background:red !important;
7  }

html代码：

1 <div class="test">
2     this is test div
3  </div>

测试结果：

背景为红色

结论:ie6的important也支持被覆盖

5.测试比较特殊的情况，让我们来看看ie到底有多诡异

css代码：

1 .test{
2     background:black !important;
3 }
4 
5 .test{
6     background:red !important;
7     background:blue;
8 }

html代码：

1 <div class="test">
2     this is test div
3 </div>

背景为黑色

结论:ie6在计算元素样式时，会先计算每一个选择器中样式结果，然后再对所有选择器再计算个总结果。这次的样式计算相当于先计算第二个选择器中的结果{background:blue;}（依据第2个测试），然后再与第一个选择器合并，得到最终结果为黑色。

总结：

1. ie6还是部分支持important特性的
2. ie6的每一个css选择器内部，后面的样式会覆盖前面的样式，不管前面的样式是否有important属性