Search code examples
cssstylish

Css rules only affecting some elements?

I am attempting to create a custom stylish theme for blender.stackexchange, however the rules are only affecting some tags for me in FF 29.0.1

As far as I can tell, all the tag elements have all the same classes/parent elements/etc., yet only some are affected by the stylish stylesheet.

My complete stylish theme which I'm using for testing:

@-moz-document url('https://blender.stackexchange.com/') {

.post-tag, .tags a:hover, .tags * {
    color:red !important;
}

}

All the tags turn red when hovered over, yet only some are red when not under the cursor. Why is this?

Here's an example of one of the tags which is not overwritten:

enter image description here

And one which is (though according to the inspector, it is not!?):

enter image description here

Interestingly, I tried this on SO and it worked as expected.

Solution

  • There is an existing rule for the visited anchor state with an !important declaration that's preventing the new color from taking priority.

    Existing style:

    a.post-tag:visited {
    color: #566e76 !important;
}