Question

为什么CSS规则不会自动级联到HTML控件（如输入）或选择并设置文本显示样式？

对于Ex：我在body标签上应用了一个css类，它将文本呈现为红色。由于级联规则，该html文档中的所有文本都以红色呈现（除非被覆盖）。但是如果我在该文档中有一个文本框控件，则该样式不会级联到文本框中以使其中的文本呈现为红色。

有人能指出我参考文件吗？

Answer 1

原因是浏览器确定的默认CSS样式。

input和select具有默认颜色/尺寸/填充等。
大多数其他元素使用inherit来表示颜色和大小。
另一个例子是table的字体大小，它是固定的，默认情况下不会继承，必须由开发人员覆盖。

试试这个示例HTML：

<html>

<style type="text/css">
body { color:red; font-size:36px; }
</style>

<body>
Hello
<input type="text" value="test value"/>
<table><tr><td>cell value</td></tr></table>
</body>
</html>

您会看到font-size并未继承color和input。此外，单元格值保持默认字体大小。现在将以下CSS添加到style块：

input { color:inherit; font-size:inherit; }
table { font-size:inherit; }

你会看到他们现在按照你的预期继承。

您真正想要做的是使用重置样式表。表只是一个附加了默认样式的元素，对于许多开发人员来说是不可取的，并且每个浏览器可能略有不同。这就是为什么许多人使用重置css 样式表。这些样式表将大多数元素重置为统一大小和零边距，填充等。有些比其他元素更极端。有关示例，请参阅http://meyerweb.com/eric/tools/css/reset/或Google。

由于大多数重置样式表都不会使input和select的颜色继承（大多数开发人员不希望它们继承而是希望显式设置大小/颜色），因此应该设置它们在你的样式表中：

input, select { ... }

小心与* { ... } 任何目的（如其他答案所示）。这打破 CSS的“级联”部分，并且会导致规则不像嵌套元素中那样级联。如果您使用* { color:red; }，然后使用以下HTML：

<h1 style="color:green;">Hello <i>world</i></h1>

您最终将获得绿色 Hello 和红色世界。（因为<i>匹配*。任何新元素都会将样式重置为红色，颜色不再级联！）

Answer 2

某些html元素具有基于doctype和浏览器（甚至是浏览器版本）设置的默认样式。这些样式可能是边距，宽度，填充甚至文本颜色。

那就是说，如果你想要一个特别的东西，比如“颜色：红色;”申请一切，你应该使用：

* { color: red;}

*（星号）匹配所有内容，并导致所有元素以红色显示其字体颜色。除非应用更具体的css规则。

您可以查看this page了解详情。

我相信（有人纠正我，如果这是不对的），通过规则列表是：

浏览器默认
一般css规则（input { blah }）
id规则（#topdiv { blah }）
具体的css规则（class="xx"）
样式设置（style='color:blue;）

我不确定隐式和显式继承样式的位置，但你应该明白这一点。

html控件的CSS级联规则

2 个答案: