1

我一定是在监督某些事情或在我的代码中有一些愚蠢的错误，但我无法使用 ID CSS 和（脸红）覆盖 Class CSS，即使添加了讨厌的 !important hack ...

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

这是检查员屏幕截图：

截图侧边栏 CSS

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

4

3 回答 3

2

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

left: 0如果您想要left: 100%.left: auto

于 2017-03-07T17:57:50.563 回答
-1

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

#page-front-page > .sidebar {

（谷歌“CSS 特异性”以了解选择器的不同部分关于特异性的确切重要性）

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

于 2017-03-07T18:00:21.727 回答
-2

尝试：

  #page-front-page > .sidebar {
    padding: 0;
    position: absolute;
    top: 0;
    right: 0 !important;
    width: 45%;
    left:inherit!important;
    }
于 2017-03-07T17:57:34.853 回答