CSS优先级和!important与IE6的BUG讨论及解决方案

CSS优先级

CSS优先级是用来确定当多个样式规则都应用于同一个元素时，哪一个规则将会被应用的规则。CSS优先级规则遵循以下几个原则：

1. 选择器特殊性(Specificity)：选择器的特殊性是根据选择器的不同类型来计算的，特殊性的计算规则如下：

   • 每个 id 选择器的特殊性都是 100。
   • 每个 class、属性或伪类选择器的特殊性都是 10。
   • 每个元素或伪元素选择器的特殊性都是 1。
   • 选择器里面只包含通配符、子选择器和相邻选择器，则特殊性为 0。

2. 声明重要性(Important)：用!important声明的样式规则具有最高的优先级。

3. 样式表顺序(Order)：在相同特殊性和重要性情况下，后面的样式规则将会覆盖前面的样式规则。

!important与IE6的BUG讨论及解决方案

在IE6中，如果一个元素同时包含!important和背景图片（background-image）的样式规则，那么背景图片将不会被显示出来，这个问题被称为“IE6的!important和背景图BUG”。

以下是解决此问题的两种方法之一，可以在CSS代码中新增一条针对IE6的hack样式规则：

/* 针对IE6的hack，只有IE6会执行 */
* html .element {
  background-image: url("my-image.png") !important;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my-image.png', sizingMethod='scale');
}

其中：

• * html 选择器是IE6特有的hack方式，只有IE6会应用该规则。
• .element 表示要设置背景图的元素。
• 第一条样式规则将会被IE6忽略，因为IE6不支持!important和背景图混合使用。
• 第二条样式规则将会把背景图设置为none，这样即使IE6不支持!important，也不会显示原本的背景图。
• 第三条样式规则只有IE6支持，它会使用AlphaImageLoader滤镜来设置背景图。具体用法请参考官方文档。

另一种解决此问题的方法是使用JavaScript检测浏览器版本，并为IE6动态地修改CSS样式：

if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.indexOf("MSIE 6.0") != -1) {
  document.getElementById("my-element").style.backgroundImage = "url('my-image.png')";
}

其中：

• navigator.appName 可以获取浏览器的名称，如果是IE浏览器则返回 "Microsoft Internet Explorer"。
• navigator.appVersion 可以获取浏览器的版本号，如果版本号包含 "MSIE 6.0" 则代表当前浏览器是IE6。
• document.getElementById("my-element") 可以获取DOM中id为 "my-element" 的元素。
• style.backgroundImage = "url('my-image.png')" 可以动态地修改元素的背景图。

以上就是CSS优先级和!important与IE6的BUG讨论及解决方案的完整攻略，如果还有问题可以随时追问。