覆盖没有默认值的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;这样的东西，so...how您是否“取消声明”在主样式表中分配的left属性？

Answer 1

如果我没看错您的问题，您是否希望在一个样式表中“擦除”另一个样式表中的声明，以便该属性将计算为默认值？

目前还没有办法将其重置为浏览器用作给定元素的默认值。您能得到的最接近的是CSS3 initial keyword，它根据规范而不是浏览器定义属性的方式将属性重置为其初始/默认值：

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

除了Safari/Chrome和火狐(作为-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中查找字体大小，并使用它们进行依赖于文本高度的高度计算。

如果使用PHP或其他一些预处理，你也可以将其用于CSS文件：

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

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