为什么用户代理样式表覆盖了我的 html{} 样式？

Question

我的 html 元素具有以下样式：

html {
font-size: 16px;
font-family: "Harmonia Sans Regular" !important;
}

但即使使用!important，我的字体样式仍然在输入之类的东西中被覆盖。

为什么？我认为继承的样式胜过用户代理样式？

Answer 1

不。如果您希望您的样式具有优先权，则它们需要应用于相同的元素。在我们的例子中，是input。

您已将样式应用于html元素，而不是input.
现在，如果您将选择器更改为html *、 to html input、 toinput或 to *，那将是另一回事……这两个选择器将进行比较，您的选择器将具有优先权。

您的选择器与默认浏览器样式表中的选择器之间的唯一区别是您的选择器稍后加载，因此，如果您具有相同的特异性，则应用您的选择器。因此，您要应用的最小选择器将是input {}.

但这里重要的一点是：html {}只有在元素级别未定义（未设置）的样式可继承input属性。如果它们被设置，则不会发生继承（不需要继承，因为属性已解析）。该设定值适用，无论价值和特异性对任何父母。事实上，如果你期待会发生什么，设计网页是很多更加困难，少了很多灵活的（恕我直言）input

这是一个很长的说法：改变

html {/* globals here*/}

进入：

* {/* globals here */}

...他们可能会按预期工作。但要注意：这将适用于所有的元素，你将很快明白为什么继承的工作方式是，其实挺聪明的（和有用）。