css - 关于重复(后备)属性，如何评估 CSS 规则？

Question

网络浏览器如何解释 CSS 规则中的重复属性？
这里有一个例子是什么意思:

body
{
    background-color:red;
    background-color:blue;
    background-color:rgba(0,0,255,1);
}

对我来说重要的方面:

1. 多次定义一个属性是否有效？

2. 是否对规则进行了评估，以便将属性的值设置为所使用的最后一个值(last - 在规则文本中稍后出现)？通过实验，我看到在上面的示例中使用了 rgba(0,0,255,1)，但这是巧合还是定义？

3. 如果浏览器不理解某个值会怎样？它会“回退”到之前看到的最后一个值，仍然理解或因为最后一个值不被理解而变成未定义吗？

   例如，如果浏览器不支持 rgba(r,g,b)，而是支持 red 和 blue。然后将背景颜色设置为 blue，因为它是最后一个值(某种后备)，还是会完全失败？

4. (假设有一个定义的行为使用最后一个“理解的”值)，这对所有理解的属性都有效吗？ (例如 Microsoft IE6 Apple 的 Safari 浏览器 没有实现所有的 touch-action 值，只有 auto 和 操纵，因此我可以做以下事情吗:

body{    /* first set to manipulation, to at*/    /* least disable double-tap-zoom on iOS Safari*/    touch-action:manipulation;    /* then set it to the actually desired */    /* value of pan-y, supported by other */    /* modern browsers */    touch-action:pan-y;}

Answer 1

您的假设是正确的。根据 MDN:CSS 如果浏览器遇到它不理解的声明或规则，它只会完全跳过它而不应用它或抛出错误。

阅读此处:https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS