html - In which order are CSS styles applied?

Question

I have the following HTML.

<ul>
  <li>
    <a>asdas</a>
  </li>
</ul>

In my CSS stylesheet I have general settings for the a tag, and several hundered lines later settings for ul li a. Like this:

a:link
{
 color: red;
}
...
ul li a
{
 color:blue;
}

Firebug tells me, that first the color:blue is loaded, and afterwards overriden by color:red
So far I've always thought, that the order of loading css files and the order of style inside a single css file tell the browser how html elements should be formatted. Unfortunately I'm now experiencing it vice versa.

So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

Answer 1

Styles are applied according to which styles are most specific to the element, and then in textual order for rules that have equal specificity. More here in the spec. Because a:link is more specific than ul li a, that style wins regardless of placement.

So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

Make the blue rule at least as specific as the red rule. In this case, you can do that by adding :link to it:

ul li a:link
{
  color:blue;
}