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

Question

我的 html 元素上有以下样式:

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

但即使使用 !important，我的字体样式仍然在输入等内容中被覆盖。

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

Answer 1

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

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

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

但这里重要的一点是:html {} 仅样式化可继承的 input 属性，这些属性在元素级别未定义(未设置) .如果它们被设置继承不会发生(没有必要继承，因为属性解析)。 input 设置值适用，无论任何父项的值和特异性如何。事实上，如果您所期望的事情发生了，那么设计 Web 将会很多并且更不灵活(恕我直言)。

---

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

html {/* globals here*/}

进入:

* {/* globals here */}

...它们可能会按预期工作。但请注意:它将应用于所有元素，您将很快就会明白为什么继承的工作方式实际上非常聪明(而且很有帮助)。