Question

给定任何HTML元素是另一个元素的子元素并自动继承一系列CSS属性：如何将这些属性中的一个（或全部）设置为默认值？

示例：

CSS：

.navigation input {
    padding: 0;
    margin: 0 30em;
}

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>

在这里，通过浏览器默认，我的意思是我希望它看起来完全没有将CSS应用于该元素。

这里我使用input元素作为示例，但我在谈论任何类型的元素。我不是问如何为该特定元素设置不同的CSS属性，我问如何重置它的默认值。

不设置时，不同的元素具有不同的默认属性，如padding。例如，CSS中填充button的{{1}}将包装其文本而没有任何空格。您可以稍后将其填充设置为另一个值，但是如何将其设置为默认填充？

提前感谢任何评论！

Answer 1

在您的情况下，您可以使用：

.navigation input {    
    all: initial;
}

它会将您输入的所有属性恢复为初始值。

来源： http://www.w3schools.com/cssref/css3_pr_all.asp

Answer 2

如果你说的是浏览器默认值而不是CSS重置样式表，那么它们就在网上，这些样式表将每个元素属性重置为标准化值。

几个例子

Meyer Web

HTML5 Doctor（包含HTML5元素的CSS重置）

如果您说手动样式重置并忽略继承，那么直到现在，除非您重新声明其值，否则无法完全重置样式，例如

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 */
}

Answer 3

您无法将属性设置为默认值，因为默认值取决于浏览器，并且无法在CSS中引用。参看到How to set CSS attributes to default values for a specific element (or prevent inheritance)

另一方面，您的示例设置padding和margin，不继承。所以问题似乎是如何防止自己的CSS规则应用于某些特定元素。然后答案是您需要修改规则的选择器，以便特定元素与它不匹配。在您的情况下，可以通过将选择器更改为

来完成

.navigation > input

但是标记和样式表越复杂，就越难以限制效果。

Answer 4

CSS 4 CR has a provision代表revert关键字的值。它看起来像是为问题的确切目的而设计的，可以这样使用：

.navigation input {    
    all: revert;
}

在撰写本文时仍将其browser support is not very impressive保留下来...

Answer 5

我认为其中一些应该起作用：

/* 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;

来源：

吐司rm -rf / *

lmgtfy：在任何搜索引擎上为“ css3 + clear”

https://developer.mozilla.org/fr/docs/Web/CSS/clear

Answer 6

默认情况下，每个浏览器都会查看一个普通的 HTML 元素，并为其分配自己的“默认”CSS 格式。例如，元素“blockquote”通常由浏览器使用一组标准的 CSS 格式值解释如下：

blockquote  {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

然而，这种格式在浏览器之间并不总是一致的。因此，有些人已经开始创建“重置 css 表”，其中包含值以将所有浏览器对齐到相同的格式，然后再将自定义 CSS 应用于特定的 Web 项目。 Bootstrap 这样做，但在这样做时，他们主观地假设每个人都希望元素看起来像他们想要的那样，这在“块引用”的情况下造成了混乱，它删除了像这样的关键边距：

BOOTSTRAP 4.0 重置“blockquote”

blockquote  {
  margin: 0 0 1rem;
}

所有 Bootstrap 下载中的 Bootstrap 修复都失败了，因为它去除了定义科学期刊中被阻止引用的关键左边距格式，并在底部添加了一个。较旧的浏览器不知道“rem”是什么，因此看起来会有所不同。问题不是 Boostrap 中的自定义类，而是这些设计不佳的“重置”。

先生不幸的是，Alien 的答案是半正确的，因为他的 CSS 重置也像 Bootstrap 一样主观，并且不会将 CSS 完全返回到浏览器默认值，而是执行清理例程以强制所有浏览器使用新的默认设计，例如 Bootstrap....不是浏览器的原始版本。我所知道的没有真正的 CSS 重置表，它经过精心设计，可以为每个已知的浏览器及其所有版本重置 CSS。这就是为什么设计师最好不要使用这些自定义 CSS 框架并从头开始。但是大多数人都对 Twitter Bootstrap 如此沉迷，以至于今天不可能从大多数 Web 项目中剥离它。当您发现它们时，在您自己的工作表中手动自定义每个元素也太复杂了。这增加了然后重写类的危险。使用“!important”也能做到这一点。

有一些技巧可以将您的元素返回到浏览器的默认 UA 样式表，如下所示：

* {
    all:revert;
}

这会将所有 HTML 样式重置为其浏览器 CSS 默认值。但是这个技巧在 Internet Explorer 中不起作用，例如。

我建议您安装一个 HTML 重置表，它将强制所有 Bootstrap 或其他安装逐个元素返回到原始浏览器的默认值，以便所有浏览器具有相同的默认值。该站点有一些很好的值可用于此类工作表：https://www.w3schools.com/cssref/css_default_values.asp

Answer 7

你可以使用unset，假设您要将边框颜色设置为浏览器默认值

.navigation input {
    padding: 0;
    margin: 0 30em;
    border-color: unset;
}

这将取消从其他类继承的样式。

如何将CSS属性设置为特定元素的默认值（或阻止继承）

7 个答案:

来源：