Question

CSS中使用的all属性是什么？

此问题与this one有关。

根据this：

'all'属性是一种重写所有CSS属性的简写。

Name:           all
Value:          initial | inherit | default
Initial:        See individual properties
Applies to:     See individual properties
Inherited:      See individual properties
Percentages:    See individual properties
Media:          See individual properties
Computed value: See individual properties
Animatable:     See individual properties

因此，它必须重置选择器的CSS属性。

这意味着，例如，如果我们导入Twitter Bootstrap并添加下面的样式，则必须重置.btn类：

.btn {
    all: default;
}

这不会发生。见jsFiddle。

我说错了吗？这不是在网络浏览器中实现的吗？

Answer 1

您链接的W3C规范表示它目前处于“工作草案”阶段。此外，CanIUse.com上没有提及all属性，因此我认为可以说它是实验性的。

您可能想尝试-webkit-all或-moz-all。

你知道吗，阅读这个功能的规格，感觉就像一个黑客。如果您正确设计样式级联，则不需要此属性。

Answer 2

目前我相信只有Firefox支持all（as of version 27）。您可以使用all属性（例如all：unset;）将值应用于每个属性（direction和unicode-bidi除外）。

Answer 3

在最新的FireFox中查看此笔：http://codepen.io/tomliv/pen/AejFH

灰色区域有3个输入（真的！）。

这不是我所期待的，但将all设置为initial会更符合您的需求吗？

Answer 4

每个属性都没有默认值 - 至少有一个在所有浏览器中都是一致的。

这就是CSS重置的地方。我建议看看Eric Meyer的CSS重置：http://meyerweb.com/eric/tools/css/reset/。通常，这些类型的重置用于减少浏览器的不一致性。

如果您希望将某些内容应用于所有元素（您仍然需要单独列出每个属性），请使用

* { /* Universal Selector */ }

使用重置样式表或某些CSS框架（如bootstrap）可能是规范化CSS和跨浏览器一致性的更好解决方案。

如何在CSS中使用“all”属性

4 个答案: