无法覆盖规则，即使在使用 !important 时也是如此

Question

我一定是在监督某些事情或者我的代码中有一些愚蠢的错误，但我不能用 ID CSS 和 ( 覆盖 Class CSS脸红 ) 即使加上讨厌的 !important hack ...

注意：这是一个旧的（大概）WordPress 模板，仍然使用清除 div 的浮动，但我必须使用它。不是我的选择。

HTML:

<body id="page-front-page" class="page-template-homepage">

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gardens</a></li>
</ul>

<div class="sidebar">
blah
</div>

CSS

#page-front-page > .sidebar {
padding: 0;
position: absolute;
top: 0;
right: 0 !important;
width: 45%;
}

还有几行是

.sidebar {
width: 280px;
padding: 50px 40px;
position: absolute;
top: 0;
left: 0;
font-size: 0.71em;
font-family: 'BrandonGrotesque-Light';
}

我什至尝试交换各自 .sidebar CSS 的位置，但没有任何帮助。根本无法让 right:0; 覆盖 left:0;。

检查器截图如下：

我错过了什么，看不到，愚蠢吗？非常感谢！！！

Answer 1

尝试：

  #page-front-page > .sidebar {
    padding: 0;
    position: absolute;
    top: 0;
    right: 0 !important;
    width: 45%;
    left:inherit!important;
    }

Answer 2

您将使用 right 0 !important 覆盖另一个 right 声明。您正在使用它来试图覆盖另一个属性。它不是这样工作的。没有联系，因为它们是两个不同的属性。

如果你想要left: 0的对立面，那么试试left: 100%...或者，正如评论中提到的@BoltClock，left: auto.

Answer 3

这与 "specifity" 有关：覆盖规则的选择器必须至少与另一个选择器一样具体，因此您必须在第二条规则上使用此选择器：

#page-front-page > .sidebar {

(google for "CSS specifity" 了解选择器不同部分在特异性方面的确切重要性 )

补充：是的，正如 Michael_B 和 BoltClock 所写，您不能用 left 参数覆盖 right 参数，但必须将第一个参数重置为 auto

无法覆盖规则，即使在使用 !important 时也是如此

Cannot override a rule, even when using !important

css

css-selectors

css-cascade