为什么CSS的样式不是由HTML表单域继承？(Why are CSS-styles not inhe

我想设置文本的字体样式和字体大小我的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等？

Answer 1:

input ， select ， textarea -他们不默认继承，但你可以将其设置为与CSS继承

input, select, textarea {font-family: inherit;}

现场演示： http://jsfiddle.net/rvjKE/

Answer 2:

一个元素继承属性仅当没有样式表设置元素上该属性（或当该值inherit已设置）。表单字段通常在浏览器的样式表为他们设置。

所以，你需要对他们明确设置的属性重写浏览器的默认值。您可以使用通用选择这样做*如果你希望所有的元素有一些特性，例如

* { font: 100% Calibri, sans-serif; }

当需要时，您可以很容易地覆盖这个特定的元素，因为通用选择具有非常低的特异性。

Answer 3:

这是因为它们是在默认情况下把用户的操作系统的外观和感觉的用户界面元素。至少，他们习惯了。现在不同的浏览器使用不同的默认样式，但他们一般往往是非常相似的。

不管怎么说，这个想法是让网站所有者修改周围的界面元素的外观，同时仍然保持输入元素的用户的默认外观。迫使你单独改变风格是做到这一点的唯一方法。

Answer 4:

您可以使用form CSS选择风格你输入

form{
    font-family: sans-serif;
    color: #EEEEEE;
    font-size: 22pt;
}

文章来源: Why are CSS-styles not inherited by HTML form fields?