为什么CSS规则不会自动级联到HTML控件(如输入)或选择并设置文本显示样式？
对于Ex:我在body标签上应用了一个css类,它将文本呈现为红色.由于级联规则,该html文档中的所有文本都以红色呈现(除非被覆盖).但是如果我在该文档中有一个文本框控件,则该样式不会级联到文本框中以使其中的文本呈现为红色.
有人能指出我参考文件,谈论那个？
原因是浏览器确定的默认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>匹配*.任何新元素都会将样式重置为红色,颜色不再级联!)