为什么用户代理样式表会覆盖我的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将会困难得多而灵活性降低（IMHO）。

---

说的很长话：改变

html {/* globals here*/}

进入：

* {/* globals here */}

...，它们可能会按预期工作。但请注意：它将应用于所有元素，并且您将很快就会理解为什么继承的工作方式实际上很聪明（而且很有帮助）。