Question

假设我有这个：

.element {
  position: -webkit-sticky;
  position: sticky;
}

这是同一类中的两个position属性，每个属性具有不同的值。

显然，后者不会覆盖前者。它们都是同一个属性的值吗？浏览器如何确定要使用两个值中的哪个？

Answer 1

基本思路

当有多个重复属性时，CSS将采用最后一个有效值。

示例1-所有值均有效，因此CSS取最后一个值：

div {
  width: 100px;
  height: 100px;
  background-color: red;   /* The first valid value */
  background-color: black; /* The last valid value */
}

<div></div>

示例2-最后一个值无效，因此CSS采用最后一个有效值：

div {
  width: 100px;
  height: 100px;
  background-color: red; /* The last valid value */
  background-color: 123; /* Invalid color value */
  background-color: 456; /* Invalid color value */
}

<div></div>

我们为什么要这样做？

这是为了确保适当的浏览器支持。

以您的示例为例，大多数浏览器的sticky属性的position值为not widely supported。某些浏览器仅支持供应商前缀值。

因此，此代码段：

.element {
  /* If browser does not support standard value, use this prefixed value */
  position: -webkit-sticky;
  /* If browser support this, use this standard value */
  position: sticky;
}

浏览器如何选择CSS值前缀？

1 个答案:

基本思路

我们为什么要这样做？