我想在我的HTML文档中设置文本的字体样式和字体大小。
<html>
<head>
<title>Style inheritance</title>
<style type="text/css">
<!--
body {
background-color: #000000;
font-family: sans-serif;
color: #EEEEEE;
margin: 0;
font-size: 22pt;
}
-->
</style>
</head>
<body>
test text
<form>
<input type="text">
</form>
</body>
</html>
我曾经了解到，每个HTML元素都继承其父元素的样式属性。就我而言，body的所有子元素都应该具有大小22pt。
但是为什么这对input、select、textarea等不起作用呢？
input ， select ， textarea button - 默认情况下它们不继承，但您可以将其设置为使用 css 继承
input, select, textarea, button {font-family: inherit;}
现场演示：http://jsfiddle.net/rvjKE/
body {
font-family: courier;
}
input {
width: 250px;
}
input.inherit {
font-family: inherit;
}<div>simple text should be courier</div>
<input type="text" value="input text - does not inherit" /><br/>
<input type="text" class="inherit" value="input text - inherit from css" />仅当没有样式表在元素上设置该属性（或已设置值inherit）时，元素才会继承该属性。表单域通常在浏览器样式表中具有设置。
因此，您需要在它们上显式设置属性以覆盖浏览器默认值。您可以使用通用选择器执行此操作*如果您希望所有元素都具有某些属性，例如
* { font: 100% Calibri, sans-serif; }
您可以在需要时轻松覆盖特定元素的此设置，因为通用选择器的特异性非常低。
这是因为它们是用户界面元素，默认情况下具有用户操作系统的外观。至少，他们曾经是这样。如今，不同的浏览器使用不同的默认样式，但它们通常非常相似。
无论如何，这个想法是允许网站所有者修改界面元素的外观，同时仍然保持用户对输入元素的默认外观。强制您单独更改样式是唯一的方法。
您可以使用
form CSS 选择器来设置输入样式
form{
font-family: sans-serif;
color: #EEEEEE;
font-size: 22pt;
}