Question

Web浏览器如何在CSS规则中解释重复的属性？
这里是一个示例，意思是：

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

对我来说重要的方面：

多次定义一个属性是否有效？
是否已对规则进行了评估，以便将属性的值设置为遇到的最后一个值（ last-稍后在规则的文本中出现）？通过实验，我发现在上面的示例中使用了rgba(0,0,255,1)，但这是巧合还是已定义？
如果浏览器无法理解值会怎样？它是否会“回退”到以前看到的最后一个值，由于无法理解的最后一个值而仍然理解为或成为未定义？

例如，如果浏览器不支持rgba(r,g,b)，而是支持red和blue。然后将背景颜色设置为blue，因为它是最后一个值（有点后退），还是会完全失败？
（假设存在使用最后一个“理解的”值的已定义行为），这对于所有可理解的属性是否有效？（例如， ~~Microsoft IE6~~ Apple的Safari浏览器并没有实现所有touch-action值，只有auto和manipulation可以实现，因此我可以这样做以下：

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

Answer 2

由于您的问题已被我理解，因此我将为您提供更广阔的前景，并尝试解释您提到的每个重要方面。

创建相同规则并不断更改其值没有意义。因为CSS在标签或类中从上到下读取，即;在以上情况下，body {}每次读取包中的相同规则时，都会重新实例化该规则，直到在规则末尾使用'！important'对其进行明确定义为止。
是的，它的工作很简单，就像您为第二个方面及其定义所述。
根据MDN：CSS如果浏览器遇到不了解的规则，它将跳过该规则并继续进行下去。

Answer 3

编写CSS规则，并命名其部分，例如：

at-rule optional (conditions) {
  /* rule */
  /* begins with a selector list */
  selector1, selector2 /* {
    /* block rule */
    property1: valueA;
    property2: value2;
    property1: valueB;
  }
  /* end of rule */
}

必须遵守@media <media-query-list>这样的规则，否则内部的所有内容都将被忽略（例如，如果用户调整其视口的大小，则可能晚于2s或之前应用）。如果无效，则永远不会应用
如果选择器列表中的任何选择器在此浏览器中无效，则整个规则将被忽略
对于每个属性，将应用浏览器可以理解的最后一个值。这是相同的规则还是不同的规则，不同的样式表等无关紧要。选择器的适用性适用（规则没有任何附加的特定性），因此遇到的最后一个有效声明的选择器必须具有更高或更高的特异性与倒数第二个相同，否则将不适用。

所以：

多次定义CSS属性是有效的
是
请参见上文（您有错字：rgb(r, g, b)和rgba(r, g, b, a)被现代浏览器理解，但rgba(r, g, b)却不被理解）
是

编辑：这是针对作者样式表的（您和我是作者，都是Web开发人员/设计人员），当您考虑user agent stylesheets, user stylesheets and !important时，还有另一组优先级（用户在网络上始终是硬道理：p ）。

对于重复（备用）属性，如何评估CSS规则？

3 个答案: