覆盖没有默认值的CSS属性

Question

如果该属性没有默认值,CSS中是否可以覆盖属性？

例如,假设您的主样式表定义了特定元素的边框:

#element {
  border: 1px solid #000;
}

如果要从辅助样式表禁用边框,可以执行以下操作:

#element {
  border: none;
}

假设辅助样式表在主要样式表之后加载,则border: none规则优先并删除边框.

但是,如果您尝试覆盖没有默认值或空值的属性,该怎么办？

#element {
  position: absolute;
  left: 0;
}

现在说,在你的辅助样式表中,你想要这样做:

#element {
  right: 0;
  top: 0;
}

你不想要任何价值left.没有这样的东西left: none;,所以...你如何"取消声明" left在主样式表中分配的属性？

Answer 1

如果我正确地阅读了您的问题,您是否希望在一个样式表中"擦除"您在另一个样式表中的声明,以便该属性将计算为默认值？

目前无法将其重置为浏览器用作给定元素的默认值的任何值.您可以获得的最接近的是CSS3 initial关键字,它根据规范将属性重置为其初始/默认值,而不是根据浏览器的定义方式:

#element {
  left: initial;
  right: 0;
  top: 0;
}

除了在Safari/Chrome和Firefox(as -moz-initial)之外,它没有太多的浏览器支持,因此您的下一个最佳选择是查找初始值并对其进行硬编码.对于left属性,它是auto(并且我相信它是所有浏览器中任何元素的值),所以:

#element {
  left: auto;
  right: 0;
  top: 0;
}