CSS 属性重复问题

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 的所有其他属性感觉不对，它基本上具有相同的值和以前一样。

有什么方法可以消除重复的条目(即位置、顶部、底部等)除了 @media only 屏幕下的填充底部？

TIA，

科森

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;
}