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显示为块.事实上,当我检查DOM时,它display: inline被覆盖了#main-content.

据我所知,这不应该发生.或者我错了,id元素将始终覆盖子类？

Answer 1

你有2个选择器:#main-content ul li和.footer-buttons ul li.第一个使用id而第二个使用类,这就是为什么第一个使用更具描述性的原因.使用:

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

Answer 2

我认为ID确实优先于类,但是这篇文章可能有更多的信息 CSS类优先级

你总是可以在.footer-buttons ul和ul li声明中添加!important,或者在th3e .footer-buttons类前添加id.

例如

#main-content .footer-buttons ul