无法覆盖CSS规则

Question

在我的CSS中，我有一个id为#home的元素：

body >#home, body[orient="portrait"] > #home{
    top:87px !important;
    background: white!important;
}

当我关闭一个弹出窗口时，一个类被添加到同一个元素：

body >.angularFtw, body[orient="portrait"] > .angularFtw{
    top:170px !important;
}

<ul id="home" class="angularFtw">

但是当添加.angularFtw时，它会忽略规则。我想做的就是给该元素另一个top位置。

我正在处理的项目有很多像!important这样的黑客攻击。使用的库是ZeptoJS，我无法添加查询等。

如何使用vanilla JS / CSS为该元素赋予另一个top:x样式？

而且我不确定类是否可以覆盖id的规则？

更新

我的元素开头是这样的：

<ul id="home">

然后我尝试通过添加一个类来给它一个新的位置：

<ul id="home" class="angularFtw">

我不允许更改下面的CSS：

body >#home, body[orient="portrait"] > #home{
    top:87px !important;
    background: white!important;
}

因此，为了给该元素一个新的位置，我必须以某种方式添加新的规则。使用一些内联样式黑客或JS。

他们正在使用上面的CSS规则来解决其他问题。这就是为什么我不允许改变它。

Answer 1

您应该将一个类添加到#home，而不是使用该ID。这是因为ID比类强。

即使你添加一个长度相同但使用类而不是id的选择器，它也会被忽略。

或者您可以将ID #home添加到选择器：

body >#home.angularFtw, body[orient="portrait"] > #home.angularFtw

这应该也可以。