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

Question

当尝试使用嵌入式样式更改外部样式表上的“ top”属性时，更改“ bottom” 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是不同的属性，因此浏览器希望同时两者应用它们。考虑到它们对版面有直接相反的影响，因此只能应用其中的 1 。优先级为top，bottom被忽略。

对于{strong> ，如果bottom属性比top属性具有更高的特异性，这是真的！

这已在 the top MDN 中阐明：

  

同时指定top和bottom时，未指定和 height或auto或100%，遵守top和bottom的距离。在所有其他情况下，如果以任何方式约束height，则top属性优先，而bottom属性将被忽略。

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

Answer 2

将 top：auto！important; 添加到您的内联中将解决此问题。

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