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

Question

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

怎么会？

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

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

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

标签： htmlcss

Answer 1

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

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

无论bottom属性是否比属性更具特异性，这都是正确的top！

这在MDNtop中得到了澄清：

当两个topandbottom都被指定时，and height是未指定的或者是autoor100%时，topandbottom距离都被尊重。在所有其他情况下，如果height以任何方式受到约束，则该top属性优先且该bottom属性被忽略。

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