CSS前缀与非前缀，使用两次？

Question

如果你有一个带有前缀的CSS属性：

-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

并访问使用前缀版本的浏览器，是否会忽略未加前缀的属性，或者同时处理带前缀的版本来应用该属性两次？

Answer 1

-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

浏览器将按顺序解析属性。例如，如果webkit读取-webkit-transform但后来读取transform它也知道，它将覆盖-webkit-transform的规则。这种技术称为CSS-Fallbacks，是级联样式表的一种效果。在阅读完整规则后，它只会应用一次。

因此，在您的情况下，它会轮换10deg一次，而不是10deg再次10deg

另一个例子是：

.test {
  height: 100px;
  background-color: red;
  background: blue;
}

<div class="test"></div>

它不会应用颜色“红色”，因为它在同一样式表中被“蓝色”覆盖。

Answer 2

在css中没有这样的东西作为在同一元素上应用两次的属性。从不。

浏览器将按顺序读取它们，并仅应用它理解的最后一个。