可以't覆盖CSS规则

Can't override CSS rule

本文关键字：覆盖 CSS 规则 可以      更新时间：2023-12-25

在我的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，我不能添加查询等

有什么想法可以用香草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规则来做其他的事情。这就是为什么我不被允许更改它。

您应该向#home添加一个类，而不是使用id。这是因为id比类更强。

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

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

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

这也应该起作用。

相关文章：