html - 内联顶部/底部属性样式不覆盖外部样式表

Question

当尝试使用内联样式更改“底部”CSS 属性时，外部样式表上的“顶部”属性优先。

怎么会？

div {
  position: relative;
  top: 10px;
}

body {
  font-family:arial;
  font-size: 20px;
}

<div style="position:relative; bottom:-100px">
test
</div>

Answer 1

虽然内联样式确实比外部样式具有更多的特异性，但这里的区别在于 top 和 bottom 是不同属性。如果它们是相同的属性， CSS specificity 会发挥作用，内联样式会覆盖外部样式。

然而，由于 top 和 bottom 是不同的属性，浏览器希望应用它们两者。考虑到它们对布局有直接相反的影响，只能应用两者中的一个。 top 优先，bottom 被忽略。

不管bottom 属性是否比top 属性更具体!

这在 the top MDN 中得到了澄清:

When both top and bottom are specified, and height is unspecified or either auto or 100%, both the top and bottom distances are respected. In all other situations, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

您的情况属于上述“所有其他情况”。