CSS - Eltern-element überschreibt Kind-Elemente-Eigenschaften

Das problem ist sehr einfach:

    <div id="main-content">
<ul>
    <li>
   <div class="post-row">
         <div class="post-footer">

               This is the Footer       
                <div class="footer-buttons">
                    <ul>
                        <li>Edit</li>
                        <li>Reply</li>
                    </ul>
                </div>
         </div>
   </div>
    </li>
</ul>
</div>

- Und jetzt main content:

#main-content ul {
    margin:0;
    padding:0;
}

#main-content ul li {
    display:block;
    list-style:none;
}

Last Fußzeile-Tasten:

.footer-buttons {
    float:right;
}
.footer-buttons ul {
    margin:0;
    padding:0;
}
.footer-buttons ul li {
    display: inline;
}

Das problem ist, dass die Liste in .footer-buttons erscheint als block. Und in der Tat, wenn ich überprüft DOM die display: inline ist overrided durch die #main-content.

Was weiß ich understrand dies sollte nicht passieren. Oder bin ich falsch-und id-Elemente haben immer Vorrang Kind-Klassen?

InformationsquelleAutor | 2011-07-06