Question

美好的一天，

我有一个外部样式表，其中包含以下条目：

#data-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-bottom: 26px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

它在IE和Firefox中运行良好，但不适用于Chrome。（我不必担心Safari）。

我发现我可以使用：@media only screen来修复它以便它适用于Chrome（和Safari），所以我有另一个条目，如：

@media only screen and (-webkit-min-device-pixel-ratio: 0) {
    #data-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: 14px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;        
    }
}

现在它适用于Chrome，到目前为止一切顺利。我担心的是，我唯一感兴趣的属性是padding-bottom，我不得不在@media only屏幕下使用#data-container的所有其他属性，这实际上具有相同的值和以前一样。

有没有什么方法可以消除重复的条目（即位置，顶部，底部等等）除了 padding-bottom在@media only屏幕下？

TIA，

COSON

Answer 1

是的，CSS是级联的（因此是C）。只需将要覆盖的规则放在媒体查询中：

#data-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-bottom: 26px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (-webkit-min-device-pixel-ratio: 0) {
    #data-container {
        padding-bottom: 14px;

    }
}

jsFiddle Demo

如果使用开发人员工具检查元素，您将看到#data-container继承了CSS规则的样式，但是padding-bottom被覆盖，因为应用了媒体查询。以下是Chrome生成的样式，例如：

@media only screen and (-webkit-min-device-pixel-ratio: 0)
#data-container {
    padding-bottom: 14px;
}
#data-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-bottom: 26px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

CSS属性重复问题

1 个答案: