表单元素忽略主体CSS

我想将网页设置为暗模式，因此我在正文中将背景设置为黑色，字体颜色设置为白色。我的期望是，这将由主体中的所有元素继承，它适用于div元素、嵌套div元素和表单，但既不适用于按钮，也不适用于select元素

Firefox开发者版73.0b11（64位）和Chromium 79.0.3945.130 Arch Linux都会出现此问题

我知道我可以再次为按钮、选择和选项元素指定值，但为什么这是必要的？为什么纽扣不属于身体

正文
{ 
背景色：黑色；
颜色：白色；
}
选择
{
身高：5公分；
}

这是正文中的文本。
这是div中的文本
这是嵌套div中的文本
这是表单中的文本。
这是按钮中的文本
这是具有内联样式的按钮中的文本
这是选择选项中的文本
这是另一个选择选项中的文本
这是另一个选择选项中的文本

浏览器有自己的风格

默认情况下，每个浏览器将为所有公共元素定义自己的css样式。这将包括底色、背景、填充、边距等

为什么？

浏览器供应商这样做是为了在您无法指定某些属性时，他们总是有一个后备方案。例如，如果您从未设置身体颜色和背景，浏览器是否应该不渲染任何内容

收回控制权

处理这种行为的一种常见做法是在样式表的开头启动CSS reset，以设置通用属性并“重置”浏览器定义的默认值。这是非常流行的，因为不是所有浏览器都使用相同的默认设置，这种技术是一种很好的方法，您不仅可以定义默认设置，还可以确保所有浏览器的默认样式一致

---

下面是一个例子 （这项技术的先驱之一。）

---

在您对您的确切查询的答复中

只需对要应用主体样式的项目设置

inherit

属性即可

button,
select,
option {
  background-color: inherit;
  color: inherit;
}

正文{
背景色：黑色；
颜色：白色；
}
挑选{
身高：5公分；
}
按钮
选择，
选择权{
背景色：继承；
颜色：继承；
}

这是正文中的文本。
这是div中的文本
这是嵌套div中的文本
这是表单中的文本。
这是按钮中的文本
这是具有内联样式的按钮中的文本
这是选择选项中的文本
这是另一个选择选项中的文本
这是另一个选择选项中的文本

按钮、链接或输入等由浏览器指定，这意味着它们的样式与正文不同。这就是为什么上传文件的输入在某些浏览器上看起来很难看，或者为什么从chrome到firefox看起来不同

您可以看到firefox样式的指定规则

---

您可以查看如何覆盖这些默认样式。

进一步阐述我的评论：浏览器通常会对某些元素的样式发表意见。在这种情况下，他们会将特定于浏览器/供应商的样式应用于输入元素。由于样式包含比您的

body{…}

选择器更具体的选择器，浏览器的默认样式将覆盖您为body设置的颜色

要避免此问题，应使用与浏览器供应商样式具有相同特性或更大特性的选择器来设置输入元素的样式

---

说到这里，这也是CSS重置很流行的原因：因为它们删除/重置元素上特定于供应商的外观。

这是因为浏览器/供应商具有一些输入元素的默认样式。他们的选择器比您的

正文{…}

选择器更具体，这就是为什么除非您使用相同或更具体的选择器显式地为元素选择，否则覆盖不起作用。@Terry:绝对猜不到，感谢您的快速回答！如果你用它来做一个真实的答案，我可以接受它，这样问题就结束了。我想通过添加

background color:inherit至底部代码段，并从问题中更新可播放的代码段。懒惰的编辑评论员@Alfie和@LazerBass无法检查问题以了解要点。
button,
select,
option {
  background-color: inherit;
  color: inherit;
}