当CSS属性/值用作回退时，它的位置是否重要？

当CSS属性/值被用作与特定CSS3属性/值不兼容的浏览器的“后备”时，它的位置是否重要

例如。假设我想要一个宽度为其父级1/3的div。我可以使用

width:calc（100%/3）

通过兼容

calc（）的浏览器实现这一点。然后，对于不兼容的浏览器，我可以使用
width:33.33%
作为回退

我的问题是：将
宽度：33.33%
置于
宽度：calc（100%/3）
之上或之下是否会对其有效性产生影响？一个层次结构可以工作，而另一个不行吗

也就是说，对CSS属性进行如下排序：

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */

    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
}

div.column {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);

    width: 33.33%; /* Fallback in case the browser does not support calc() */
}

不同于像这样订购：

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */

    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
}

div.column {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);

    width: 33.33%; /* Fallback in case the browser does not support calc() */
}

是的，顺序很重要。浏览器将使用他们理解的最后一条规则，因此您的第二个示例将否定理解该规则的浏览器的calc（）调用

作为缔约国：

…如果两个声明具有相同的权重、来源和特异性，则
后者指定获胜

是的，这很重要，“回退”应该放在第一位

原因：浏览器将仅应用上一次支持的声明样式，因此，例如，如果您有：

div {
    width: 400px;
    width: 300px;
    width: 200px;
    width: 100px;
}

…仅适用于
100px
。这在涉及供应商前缀时很常见：

div {
    -moz-property: foo;
    property: foo;
}

在这种情况下，如果支持，Mozilla浏览器将应用标准
属性
，否则将退回到特定于供应商的
-moz属性
（如果支持）。供应商前缀的实际顺序并不重要，因为浏览器通常不支持多个供应商前缀