覆盖没有默认值的CSS属性 [英] Overriding CSS properties that don't have default values

问题描述

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

Is it possible in CSS to override a property if that property doesn't have a default value?

例如，您的主要样式表为特定元素定义边框：

For example, say your primary stylesheet defines a border for a particular element:

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

如果要禁用辅助样式表中的边框， ：

If you wanted to disable the border from a secondary stylesheet, you could do this:

#element {
  border: none;
}

假设辅助样式表是在主要样式表之后加载的， border：none 规则将优先并删除边框。

Assuming the secondary stylesheet was loaded after the primary one, the border: none rule would take precedence and remove the border.

但是，如果您尝试覆盖具有默认值或空值？

But what if you were trying to override a property that doesn't have a default or null value?

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

现在说在你的辅助样式表中，你想这样做： p>

Now say, in your secondary stylesheet, you wanted to do this:

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

您不希望任何值 。没有这样的事情， left：none; ，所以...如何undeclare左在主要样式表中？

And you didn't want any value for left. There's no such thing as left: none;, so...how do you "undeclare" the left property assigned in the primary stylesheet?

推荐答案

如果我正确地阅读您的问题，在一个样式表中，擦除您在另一个样式表中的声明，以使该属性计算为默认值？

If I'm reading your question correctly, do you want to, in one stylesheet, "erase" a declaration that you have in another stylesheet, such that the property will compute to the default value?

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

There's currently no way to reset it to whatever the value a browser uses as the default for a given element. The closest you can get is with the CSS3 initial keyword, which resets a property to its initial/default value according to the spec rather than according to how a browser defines it:

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

除了Safari / Chrome和Firefox -moz-initial ），因此您的下一个最佳替代方法是查找初始值并对其进行硬编码。对于 left 属性，它是 auto （我相信这是所有浏览器的任何元素的值） ：

There's not much browser support for it besides in Safari/Chrome and Firefox (as -moz-initial), so your next best alternative is to look up the initial value and hardcode it. For the left property, it's auto (and I believe it's this value for any element in all browsers anyway), so:

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

这篇关于覆盖没有默认值的CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！