CSS - 父元素覆盖子元素属性

Question

问题很简单:

    <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>

现在主要内容:

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

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

最后，页脚按钮:

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

问题是 .footer-buttons 中的列表显示为 block 。事实上，当我检查 DOM 时，display: inline 被 #main-content 覆盖。

据我所知，这不应该发生。还是我错了，id 元素总是会覆盖子类？

Answer 1

您有 2 个选择器:#main-content ul li 和 .footer-buttons ul li。第一个使用 id，第二个使用 class，这就是为什么第一个被用作更具描述性的原因。使用:

#main-content .footer-buttons ul li { display: inline; }