Everything Falls Apart - Pro CSS Techniques - page 300

Note Layout issues frequently arise due to improper source orderof elements in your markup. Source
order describes the actual order in which elements appear in your markup, and certain methods of positioning
behave differently depending on the order of the elements being positioned. For more information on source
order and how to avoid its related issues, see Chapter 7.

■

Specificity Problems
A long time ago, in a chapter far, far away—Chapter 3 to be exact—we looked into the core of
CSS, and the rules of specificity that are governed by the cascade. As it happens, improper use
of these rules (due to a lack of understanding) often causes much dismay, strife, and general
frustration among developers.
Take, for example, this code (taken from ch14_example_specificity.html in the example
files for this topic in the Source Code/Download section at the Apress web site):

Markup

<div id="wrapper">
<div id="main">
<div id="content">
<div class="item">
<ul>
<li>Lorem <a class="readmore" href="nextpage.html">ipsum</a>.</li>
</ul>
</div>
</div>
</div>
</div>

Styles

#main #content .item a.readmore {
color:red;
background-color:yellow;

}

#wrapper #main #content a {
color:green;

}

#main #content .item ul li a {
color:blue;
font-weight:bold;
background-color:transparent;

}