3

有没有人遇到过更具体的!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 特异性的了解，以及我对简化测试的期望。

示例代码：

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

4

2 回答 2

2

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

.x-msgbox.x-floating {
  position: relative;
  z-index: 10001 !important;
}
于 2018-06-06T13:12:54.223 回答
0

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

为什么.x-msgbox.x-floating？不仅如此.x-msgbox。

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

第一个!important可以删除

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

也许x_msgbox还会更好

于 2011-05-14T16:31:50.350 回答