28 Jun 09
02 Aug 11 6:19 am
Hmm.... That's an interesting question. I checked over at W3 Schools, and couldn't find an answer for "same level" as to which would take precedence (at least not on a quick glance through their tutorials) and I couldn't find a quick answer in my books on the matter.
What I can gather, is usually, you generally don't have two at the same "level" of specificity, so there's usually not a conflict. As to which one shows up, my guess is that it might be up to the browser, so in one browser, it might work at the end and in another browser, it wouldn't.
That said, using inheritance (any tag that would be within another tag... ie a P tag within a DIV tag with a given attribute) and specificity (writing the tags in an order such that it looks for a given tag with in another tag, such as a EM tag within a P tag that's in a particular DIV tag, etc.) you can change just about anything you want.
Generally, the cascading goes like this:
1. Browser defined style
2. External style sheet
3. Internal style sheet
4. Inline style sheet.
In other words, anything put in at level "3" would "override" anything put in at level 2.
It's possible that the tag you were trying to "insert" at the end had been previously defined with the given attribute and so it is possible the browser just ignored the latter definition in the external sheet, and when you moved it up, you moved it past that code.
Then again, there could also have been a typo like a bracket not closed off correctly or a ; missing and moving the line before that point made it "valid", and so it worked.