Importance of css stylesheet hierarchy

[Leuthil]

I've done some Google searches and so far I haven't found anything that answers my question about CSS order or importance. For example, inline overrides external. Got it. Adding !important externally can override inline. Also, from everything I've ever been taught, later styles override earlier styles. So:\[code\]h1 { font-size: 12pt; }h1 { font-size: 14pt; }\[/code\]would render a font-size of 14pt. But this isn't always the case. Sometimes I want to define styles like:\[code\]<div id="content"> <input class="regular" type="text" /> <input class="regular" type="text" /> <input class="long" type="text" />\[/code\]and then in css:\[code\]#content input { width: 50%; }.long { width: 75%; }\[/code\]but that doesn't always work. Where can I see the order of importance because all of these have specific importance levels:\[code\]input {} #content input {}#content input.regular {}#content input.longinput.regular {}input.long {}.regular {}.long {}\[/code\]I really don't like having to write !important ever but if I can't figure out the order of importance specifically, then sometimes I have to change ids, classes, etc.