z-index 和多个 !important 规则的问题答案

【问题标题】：issues with z-index and multiple !important rulesz-index 和多个 !important 规则的问题
【发布时间】：2011-04-26 19:12:56
【问题描述】：

有没有人遇到过更具体的!important 声明没有覆盖另一个!important 声明的情况？这是基本的 css：

.x-floating {
  position: absolute !important;
  z-index: 10000 !important;
}

这是我想要用来覆盖 z-index 的：

.x-msgbox.x-floating {
  z-index: 10001 !important;
}

当我通过 Windows 上的 Chrome（或 Safari）调试器进行检查时，我看到 .x-msgbox.x-floating 声明被覆盖（划掉），并且 x-floating 声明处于活动状态。这违背了我对 css 特异性的了解，以及我对 simplified tests 的期望。

示例代码：

由于我使用的是 Sencha，这只能在 Chrome 或 Safari 中使用，但这里有一个 jsFiddle link（可能不符合热链接 Sencha 的源代码，但这永远不会获得足够的浏览量来说明它的重要性）。要运行测试，请单击“选择日期”按钮，然后通过拖动旋转其中一个轮子。将出现一个消息框。比较消息框和日期选择器（每个的顶级元素 - 正文的子元素；另一种方法是查找类为 x-floating 的元素）。

【问题讨论】：

点击“选择日期”冻结了我的浏览器...
您使用的是 Chrome 还是 Safari？
嗯。我正在运行测试版通道（Chrome 11.0.696.50），而不是开发版。可能值得提交一个错误报告，但这可能是由于开发通道的不稳定性——Sencha 经过了相对良好的测试，示例代码非常简单。 Windows 上的 Safari 5.0.4 也不会因此而窒息。
这真的很奇怪，尤其是 jsFiddle 演示。您的选择器不仅更具体，而且是一种页面样式（这就是 jsFiddle 处理 css 的方式）。与!important 一起，这些事实中的任何一个都应该单独覆盖样式。此外，在 Chrome 开发工具中检查 element.style 表明没有应用内联样式。我想你可能偶然发现了一个真正的 webkit 错误。
@Ender：如果我可以生成一个简单的测试用例，我会更愿意说这是一个 webkit 错误，但它确实看起来是可能的。避免使用!important 的另一个原因。感谢您的反馈！

标签： css z-index sencha-touch css-specificity

【解决方案1】：

默认位置是静态的。在静态位置不能使用 z-index。

.x-msgbox.x-floating {
  position: relative;
  z-index: 10001 !important;
}

【讨论】：

.x-floating 声明将position: absolute 应用于元素。这不是position: static。
你真是太棒了，一直在寻找复杂的解决方案，但伙计，这简直太完美了

【解决方案2】：

!important 为该 css 设置最高优先级

为什么是.x-msgbox.x-floating？而不仅仅是.x-msgbox。

第一次给.x-floating 最高优先级，所以下一次有重要的(z-inbdex.10001) 这次就被忽略了。

第一个!important可以删除

为什么不创建一个新类并直接用新值再次覆盖它？

和x_msgbox 可能也会更好

【讨论】：

如果给x-floating 提供“最高优先级”使其忽略下一个!important 属性，那么我的简化测试不应导致文本为蓝色。如果您也可以解释这些结果，并指出支持您主张的文件，我会更倾向于相信您的回答。事实上，我怀疑你没有完全理解这个问题。
看这里：w3.org/TR/CSS2/cascade.html#important-rules 只有属性 z-index 具有最高属性文本是蓝色的，因为该值被覆盖，在 firebug 中看到它应该是合乎逻辑的，如果你也给它颜色x-floating !important 规则然后颜色是正确的你用你的代码覆盖 x-floating 通常你应该给一个元素不同的类，而不仅仅是一个：class="x-floating x-msgbox" 而不仅仅是一个这样你的第二类只能是 css 中的 x-msgbos，它会自动覆盖 z-index 属性