css - 当在一个规则集中声明两个相同的 CSS 属性时，浏览器会同时呈现这两个属性吗？

Question

在一个规则集中使用相同的 CSS 属性时，如果需要为不支持您可能正在使用的属性的浏览器提供回退，如下所示：

body{
    background: rgb(255, 255, 255);
    background: rgba(255, 255 ,255, 0.5);
}

理解这两个声明的浏览器是否会呈现第一个，然后用第二个覆盖它？或者浏览器是否省去了麻烦，只呈现后者？

编辑：我知道如果浏览器理解这两个声明，它将呈现后者，但我想知道浏览器是否将第一个呈现/绘制到视口中，然后用第二个覆盖它，或者浏览器是否以某种方式工作意味着它只呈现所需的一个声明，可能会节省自己的资源？

Answer 1

我希望现代（也可能是旧的）浏览器在渲染任何东西之前解析提供给它的 CSS 规则。这是来自 Chrome 分析器的两个规则的屏幕截图：

这是另一个，仅适用于第一条规则：

如您所见，当存在两个不同的规则时，不会涉及额外的步骤。如果浏览器要渲染它两次，你会看到另一个“Paint”。（单个规则的绘制时间略有减少可能是因为我删除了rgba规则，因此浏览器不必考虑透明度）。

Answer 2

将应用 2 个中的最后一个

更准确地说：第一个将被应用，然后是第二个。这与使用 2 个相同的选择器设置背景属性相同。将应用最具描述性的一个。如果它们相同，则最后声明的将是应用的。

Answer 3

从基本的UA 一致性要求来看，浏览器必须首先解析所有CSS 规则，然后根据规范中设定的原则决定每个元素的每个属性应该使用什么值。在阅读其余部分之前应用部分 CSS 代码的意义上，不允许“增量渲染”。浏览器偏离这一点会很奇怪，因为这意味着实现者需要做更多的工作，作者和最终用户会抱怨更多，而且没有任何好处。

Answer 4

CSS 中的“C”代表 Cascading，这意味着样式可以添加或取代之前的 CSS 规则。所以第二个声明将覆盖第一个。

Answer 5

浏览器正确处理这个问题。你可以使用这种规则。

比如chrome会应用rgba，IE8会应用rgb。

Answer 6

浏览器通常应用以下算法：

for each element in the DOM tree
    for each CSS rule
        if rule's selector matches element
            apply all declarations in rule
render

这不是它的工作方式：

for each CSS rule
    for each element in DOM tree
        if rule's selector matches element
            for each declaration in rule
                apply declaration
                render

那将是一个巨大的性能问题。