覆盖css属性

Question

我的Html是这样的：

<a class="another addAnother">Add another</a>

我在外部样式表中使用“另一个”类定义了上面的样式。

fieldset.associations a.another {
   color: #693;
   display: block;
   margin: 7.5px 0px 15px;
}

我试图使用'addAnother'类来覆盖标记的样式，就像这样（在需要的地方）：

fieldset.associations a.addAnother {
   display: none;
}

但我无法覆盖。任何帮助表示赞赏。

是否有任何规则在覆盖样式时选择器应该相同（我试过这个，但没有用）？

Answer 1

您的原始声明都具有0,0,2,2的特异性。如果第二个声明低于第一个声明，它应该否决它。如果没有，请重新排序您的声明或增加特异性。

---

您可以添加body标记以提高特异性：

body fieldset.associations a.addAnother {
 display: none;
}

这会增加0,0,0,1的特异性，这是您可以添加的最低特异性。

---

您还可以通过链接类声明来使其特定于.another类：

fieldset.associations a.another.addAnother {
 display: none;
}

这会增加0,0,1,0的特异性。

---

Here is an article explaining CSS specificity。请注意，该文章未提及!important 1,0,0,0增加了特异性，因此几乎不可能推翻。

Answer 2

两个属性具有相同的重要性，因为两个选择器都具有相同的特定性。因此，如果第二个首先出现在CSS中，它需要获得更多的重要性来覆盖较低的一个。您可以通过更具体来覆盖第一个，如下所示：

fieldset.associations a.addAnother.another {
   display: none;
}

或

#someID fieldset.associations a.addAnother {
   display: none;
}

或

body fieldset.associations a.addAnother {
   display: none;
}

Answer 3

fieldset.associations a.addAnother {
   display: none !important;
}

Answer 4

它最终将取决于CSS中这两种样式的位置，但你不能再像这样重视：

fieldset.associations a.addAnother {
    display: none !important;
}