Question

根据：mozilla.org

css匹配的优先级如下：

通用选择器
类型选择器
班级选择器
属性选择器
伪类
ID选择器
内联样式

CSS代码：

body div#redDiv.myClass{
    position:absolute;
    top:10px;
    left:10px;
    width:10px;
    height:10px;
    background-color:red;
    z-index:99999999999;
}
#blueDiv{
    position:absolute;
    top:15px;
    left:15px;
    width:10px;
    height:10px;
    background-color:blue;
}

HTML：

<div id="blueDiv" style="z-index:99999999999;"></div>
<div id="redDiv" class="myClass" style="z-index:99999999998;"></div>

所以给了2个div，redDiv和blueDiv在哪里：

redDiv使用body id和类选择器的组合的CSS定义将z-index属性设置为“99999999999”但是有一个内联定义，应该将其css覆盖为“99999999998”
blueDiv将内联css设置为“99999999999”。

预期的行为应该是redDiv上方的blueDiv，但相反的情况发生，它几乎就像覆盖没有完成！但如果值较小，如“99”和“98”，则blueDiv高于redDiv（http://jsfiddle.net/9U2fU/1/）。

任何人都可以指出可能出现的问题吗？

我无法更改redDiv的原始CSS，因此我需要通过添加内联样式定义来解决问题。

JSFiddle example of wrong override

Answer 1

我将采取这种做法并同意这些意见。你的数字大于32位整数，我确定最大的z-index，无论可能是什么，都小于那个，可能是你的问题的原因，但我还没有测试过。尝试将它减少到类似... 9并看看会发生什么。

为什么z-index：99999999999;禁用内联样式定义？

1 个答案: