19

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

例子：

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未设置时。例如，在 CSSbutton中填充为 的 a0将在没有任何空格的情况下包裹其文本。您可以稍后将其填充设置为另一个值，但是如何将其设置为默认填充？

提前感谢您的任何评论！

4

7 回答 7

17

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

.navigation input {    
    all: initial;
}

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

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

于 2016-08-11T08:35:46.610 回答
6

CSS 4 CR 规定了值的revert关键字。它看起来像是为问题中的确切目的而设计的，可能会像这样使用：

.navigation input {    
    all: revert;
}

在撰写本文时，它的浏览器支持仍然不是很令人印象深刻......

于 2018-07-10T05:24:11.653 回答
2

如果您说的是浏览器默认设置而不是查看 CSS 重置样式表，它们遍布整个网络，这些样式表将每个元素的属性重置为标准化值。

几个例子

迈耶网

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 */
}
于 2013-05-09T09:36:39.550 回答
1

您不能将属性设置为默认值，因为默认值取决于浏览器并且不能在 CSS 中引用。参照。如何将 CSS 属性设置为特定元素的默认值（或防止继承）

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

.navigation > input

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

于 2013-05-09T11:54:04.900 回答
0

我认为其中一些应该有效：

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

于 2018-12-21T11:15:47.127 回答
0

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

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

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

“blockquote”的 BOOTSTRAP 4.0 RESET

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

于 2020-12-24T19:28:54.027 回答
-1

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

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

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

于 2017-07-13T10:35:44.923 回答