Html 如何将 CSS 属性设置为特定元素的默认值（或防止继承）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16458648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set CSS attributes to default values for a specific element (or prevent inheritance)
提问by Francisco Zarabozo
Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the default value?
给定作为另一个元素的子元素并自动继承一系列 CSS 属性的任何 HTML 元素：如何将这些属性中的一个（或全部）设置为默认值？
Example:
例子：
CSS:
CSS：
.navigation input {
padding: 0;
margin: 0 30em;
}
HTML
HTML
<div class="navigation">
Some text: <input type="text" name="one" />
More text: <input type="text" name="two" />
<!-- The next input, I want it to be as browser-default -->
<div class="child">
<input type="text" name="three">
</div>
</div>
Here, by browser-defaultI mean I want it to look exactly as if no CSS at all was applied to that element.
在这里，通过浏览器默认设置，我的意思是我希望它看起来完全就像没有 CSS 应用于该元素一样。
Here I'm using an inputelement as an example, but I'm talking about any kind of element. I'm not asking how to set different CSS attributes to that specific element, I'm asking how to resetit to its defaults.
这里我以input元素为例，但我指的是任何类型的元素。我不是在问如何为该特定元素设置不同的 CSS 属性，而是在问如何将其重置为默认值。
Different elements have different default attributes like paddingwhen they are not set. For example, a buttonthat has a padding of 0in CSS will wrap its text without any space. You can later set its padding to another value, but how would you set it to the default padding?
不同的元素具有不同的默认属性，例如padding未设置时。例如，在 CSSbutton中有一个 padding 的 a 将0在没有任何空格的情况下包装其文本。您可以稍后将其填充设置为另一个值，但如何将其设置为默认填充？
Thanks in advance for any comments!
提前感谢您的任何评论！
采纳答案by Mr. Alien
If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.
如果你说的是浏览器默认值而不是 CSS 重置样式表，它们在网络上随处可见，这些样式表将每个元素的属性重置为标准化值。
Few Examples
几个例子
HTML5 Doctor(CSS Reset With HTML5 Elements Included)
HTML5 Doctor（包含 HTML5 元素的 CSS 重置）
If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example
如果您说手动样式重置并忽略继承，那么直到现在，除非您重新声明它们的值，否则无法完全重置样式，例如
div {
color: red;
font-family: Arial;
}
div p {
/* Here it will inherit the parents child unless and
until you re specify properties with different values */
}
回答by C.Vergnaud
in your case you can use that :
在您的情况下，您可以使用它：
.navigation input {
all: initial;
}
it will revert all attibutes of your input to initial value.
它会将您输入的所有属性恢复为初始值。
回答by Jukka K. Korpela
You cannot set an attribute to the default value, since the defaults are browser-dependent and cannot be referred to in CSS. Cf. to How to set CSS attributes to default values for a specific element (or prevent inheritance)
您不能将属性设置为默认值，因为默认值依赖于浏览器并且不能在 CSS 中引用。参见 要如何设置CSS属性为默认值特定元素（或阻止继承）
On the other hand, your example sets paddingand margin, which are notinherited. So the question seems to be how to prevent your own CSS rule from applying to some specific element. Then the answer is that you need to modify the selector of the rule so that the specific element does not match it. In your case, this could be done by changing the selector to
另一方面，您的示例设置padding和margin，它们不是继承的。所以问题似乎是如何防止您自己的 CSS 规则应用于某些特定元素。那么答案就是需要修改规则的选择器，让特定元素不匹配。在您的情况下，这可以通过将选择器更改为
.navigation > input
But the more complicated the markup and the style sheet are, the more difficult it becomes to restrict the effects that way.
但是标记和样式表越复杂，以这种方式限制效果就越困难。
回答by Sergey Ushakov
CSS 4 CR has a provisionfor the revertkeyword for values. It looks like intended for the exact purpose in the question and might be used like this:
CSS 4 CR 规定revert了值的关键字。它看起来像是针对问题中的确切目的而设计的，可能会像这样使用：
.navigation input {
all: revert;
}
Still its browser support is not very impressivefor the time of writing...
在撰写本文时，它的浏览器支持仍然不是很令人印象深刻......
回答by Hide
I think some of these should work:
我认为其中一些应该有效：
/* Valeurs avec mot-clé */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Valeurs globales */
clear: inherit;
clear: initial;
clear: unset;
sources :
来源：
- toast rm -rf/*
- 吐司 rm -rf/*
lmgtfy : "css3+clear" on any search engine
lmgtfy：任何搜索引擎上的“css3+clear”
回答by Manoj Samaraweera
You can use unset, say you want to set border color to browser default
您可以使用 unset，假设您想将边框颜色设置为浏览器默认值
.navigation input {
padding: 0;
margin: 0 30em;
border-color: unset;
}
this will unset the style inherited from other classes.
这将取消从其他类继承的样式。
