覆盖没有默认值的 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 keyword，它根据规范而不是根据浏览器的定义方式将属性重置为其初始/默认值：

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

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

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

Answer 2

每个 CSS 属性都有依赖于浏览器的默认值，因此没有没有默认值的 CSS 属性。

正如 BoltClock 所说，initial 是最佳选择。

这里有一些关于它的规格：

http://www.w3.org/TR/css3-cascade/

编辑：

在 jmbertucci 发表评论之前，我一直没想到自己是怎么做到的，

通过使用 CSS 重置，您可以定义自己的默认值，而不依赖于使用的浏览器。 如果您在自己的 reset.css 中定义 left: 10px;，那么您可以在需要恢复默认值时使用相同的值。

例如，我经常从我的 reset.css 中查找 font-sizes 并使用它们来进行取决于文本高度的高度计算。

如果使用 PHP 或其他预处理，您也可以始终将其用于 CSS 文件：

<?php
define('DEFAULT_WIDTH', 'width: 100px;');
?>

div {
    top: 100px;
    <?php print DEFAULT_WIDTH; ?>
}