Boxed rotating message scroller

HTML

<div id="content">
    <p>text</p>
    <p class="top">text</p>
</div>
<div class="content2">
    <p>text</p>
    <p class="top">text</p>
</div>
<p>text</p>
<p class="top">text</p>

CSS

#content p {
    color:red;
} /*Специфичность тут равно 0,1,0,1*/

.content2 p {
    color:blue;
} /*А тут 0,0,1,1 В случае div.content2 p специфичность равнялась бы 0,0,1,2*/

p.top {
    color:green;
} /*Снова 0,0,1,1 и именно поэтому идёт перекрытие согласно более позднему объявлению правила*/

.top {
    color:yellow;
} /* 0,0,1,0 поэтому и не действует ни на что*/

p {
    color:orange;
} /*Здесь специфичность равна лишь 0,0,0,1*/