Question

我对CSS的理解是，通常如果您设置<div style="color: Red">，<div>内的所有内容都会受到影响。但是，如果你在里面放一个html按钮，按钮上的文字颜色不会受到影响。我有点不安这个例外。我该如何给出合理的解释？

Answer 1

这是关于用户对用户界面的期望。

按钮（和其他用户界面小部件）更像是他们的操作系统对应物。在Windows上，用户希望按钮是灰色的，带有黑色文本，这就是浏览器呈现它们的方式。你必须非常努力地覆盖这种行为。

Answer 2

这是因为输入元素从父元素继承样式信息是不切实际的，这意味着无论何时设置表单样式，都必须为其中使用的每种输入类型创建样式规则，以确保它们不会结果出乎意料。但是，您可以使用css强制输入继承其父级样式：

input {
    color: inherit;
}

该代码将导致所有输入元素继承其父文本的颜色样式。

Answer 3

您需要在CSS中查找继承的规则;某些属性值会级联到某些后代元素，而某些属性值则不会。事实上，许多CSS属性的可能值之一是inherit，这表明此值并不总是默认值。

Answer 4

“层叠样式表”（CSS）的“级联”部分意味着一般来说，你是对的：在对象上设置的属性将向下级联到它下面的对象。

但是对于某些属性来说这没有意义，所以这些属性显然是非级联的（例如，如果你在div上设置边框，你也不希望它的所有子节点都有边框）。

如果我们在DOM中处理原始XML，那么它就会结束。颜色确实会一路下降。但是，我们正在处理HTML，HTML有一些预先存在的条件，例外和覆盖。例如，<div>始终默认为display:block;，而<span>默认为display:inline;。

按钮和输入字段有很多默认值和覆盖，这就是为什么它们显示为按钮和输入字段而不必对它们进行大量样式设置的原因。这也是为什么它们会覆盖某些CSS规则（包括颜色）的级联效果。

您可以通过为已覆盖的样式指定inherit来覆盖覆盖。因此，如果您希望按钮采用之前指定的红色，则可以执行以下操作：

.mybutton {
    color:inherit;
}

Answer 5

浏览器本身具有input类型的默认样式，具体取决于它运行的操作系统。因此对于Windows来说，它很可能是灰色的，因为Apple OS的蓝色和圆形（花哨）。

有很简单的方法可以在CSS中覆盖它，我在我的网站中一直使用它，自定义按钮和输入字段以更好地匹配我的网站设计与图像和之前提到的颜色值要么继承，要么改变。

这是一篇很好的文章explaining the cascade and inheritance规则，原则上使用CSS可能会帮助你。

：）

Answer 6

按钮和其他一些元素都有自己的风格。此样式取决于浏览器。在不同的浏览器中，按钮可能看起来有点不同。