Javascript Can'；t覆盖CSS规则

在CSS中，我有一个id为

#home

的元素：

body>#主页，body[orient=“肖像”]>#主页{
顶部：87px！重要；
背景：白色！重要；
}

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

body>.angularFtw，body[orient=“肖像”]>.angularFtw{
顶部：170px！重要；
}

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

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

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

---

他们将上面的CSS规则用于其他一些东西。这就是为什么不允许我更改它。

你应该在

#home

中添加一个类，而不是使用id。这是因为id比类更强大

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

或者您可以将id

#home

添加到选择器：

body>#home.angularFtw，body[orient=“肖像”]>#home.angularFtw

---

这也应该起作用。

angularFtw与“家”是同一元素吗？如果是，则ID属性比class属性具有更大的特殊性，因此第一条规则将覆盖第二条规则。请注意，

#ID

选择器的特殊性值高于CSS中的任何其他选择器。不是说我建议这样做，但是如果您不想解决当前选择器的问题，您可以尝试：

body[orient=“肖像”]>#home.angularFtw

可能是一个特殊性问题。将标识符添加到第二组选择器中应该可以修复它（或者从第一组选择器中删除id

#home

）。尝试使用class

.home

或

。而不是angularFtw

。

<ul id="home">

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