Question

我必须在我的代码中监督某些事情或者有一些愚蠢的错误，但我无法使用ID CSS AND（ blush ）覆盖类CSS，即使添加了厌恶的！重要的黑客..

注意：这是一个旧的（ish）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;。

以下是检查员截图：

Screenshot sidebar CSS

我错过了什么，没有看到，愚蠢的是什么？非常感谢!!!

Answer 1

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

如果您想要与left: 0相反，请尝试left: 100% ...或者，如评论中提到的@BoltClock，left: auto。

Answer 2

这与＆＃34;特定＆＃34;：重写规则的选择器必须至少与另一个一样具体，所以你必须在第二个规则上使用这个选择器：< / p>

#page-front-page > .sidebar {

（谷歌搜索＆＃34; CSS特定＆＃34;了解选择器不同部分对特定方面的确切重要性）

添加：是的，正如Michael_B和BoltClock写的那样，您无法使用right参数覆盖left参数，但必须将第一个参数重置为auto

Answer 3

尝试：

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

即使使用！important，也无法覆盖规则

3 个答案: