Overriding a css property

My Html is like this:

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

I defined a style for the above using 'another' class like this in a external style sheet.

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

I am trying to override the style of tag usin开发者_JAVA百科g 'addAnother' class, like this(wherever required):

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

But I am unable to override. Any help is appreciated.

Is there any rule that while overriding a style the selector should be same(I tried this, but no avail)??

Both properties have the same importance, because both selectors are equally specific. So if the second one appears first in the CSS, it needs to acquire more importance to override one that is lower down. You could override the first one by being more specific, like this:

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

or

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

or

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

Both your original declarations have a specificity of 0,0,2,2. If the second declaration is below the first, it should overrule it. If it doesn't, reorder your declarations or increase the specificity.

You could add the body tag in order to increase specificity:

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

That will increase specificity by 0,0,0,1, the minimum amount of specificity you can add.

You can also make it specific to the .another class by chaining class declarations:

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

That will increase specificity by 0,0,1,0.

Here is an article explaining CSS specificity. Note that the article fails to mention that !important increase specificity by 1,0,0,0, making it near impossible to overrule.

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

It would ultimately depend on where those two styles are in your CSS, but you can't give one more importance like this:

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