关于重复（后备）属性，如何评估 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. 如果浏览器不理解某个值会怎样？它会“回退”到之前看到的最后一个值，仍然可以理解或因为不理解最后一个值而变为 undefined？

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

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

身体 { /* 首先设置为操作，到 at*/ /* 在 iOS Safari 上至少禁用双击缩放*/ 触摸动作：操纵； /* 然后将其设置为实际需要的 */ /* pan-y 的值，其他支持 */ /* 现代浏览器 */ 触摸动作：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 规则并命名它的部分，例如：

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> 之类的规则必须应用，否则内部的所有内容都将被忽略（例如，如果用户调整其视口大小，可能会在 2 秒后或之前应用）。如果无效，则永远不会应用
• 如果选择器列表中的任何选择器在此浏览器中无效，则忽略整个规则
• 对于每个属性，应用浏览器理解的最后一个值。不管它是在相同的规则还是不同的规则中，在不同的样式表中等等。选择器的特殊性适用（at-rules 没有任何额外的特殊性）所以遇到的最后一个有效声明的选择器必须具有更高或与倒数第二个相同的特异性，否则将不适用。

所以：

1. 一个CSS属性可以多次定义
2. 是的
3. 见上文（你打错了：rgb(r, g, b) 和 rgba(r, g, b, a) 被现代浏览器理解，但不被 rgba(r, g, b) 理解）
4. 是的

编辑：这是针对作者样式表（您和我是作者，是 Web 开发人员/设计师），当您考虑 user agent stylesheets, user stylesheets and !important 时，还有另一组优先级（用户总是在 Web 上拥有最终决定权：p）。

Answer 3

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

1. 创建相同的规则并一遍又一遍地更改其值是没有意义的。当 CSS 在标签或类中从上到下读取时，即； body{} 在上述情况下，每次读取包中的相同规则时，它都会重新实例化该规则，直到在规则末尾使用 '!important' 明确定义。

2. 是的，它的工作就像您在第二个方面及其定义中所说的那样简单。

3. 根据 MDN：CSS 如果浏览器遇到它不理解的规则，它将跳过它并继续前进。