无法覆盖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，我无法添加查询等。

有什么想法可以使该元素具有另一个top:x香草JS / CSS样式吗？

而且我不确定类是否可以覆盖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

这也应该起作用。