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

【问题标题】：CSS - parent element overrides child element propertiesCSS - 父元素覆盖子元素属性
【发布时间】：2011-09-29 10:00:57
【问题描述】：

问题很简单：

    <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 元素总是会覆盖子类？

【问题讨论】：

标签： css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我认为 ID 确实优先于课程，但是这篇文章可能包含更多信息 CSS class priorities

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

例如

#main-content .footer-buttons ul

【讨论】：

你真的不应该使用!important，因为可以选择增加你的规则特异性。

【解决方案3】：

是的，带有 ID 的选择器总是会覆盖仅带有类的选择器。这是由于“特异性”；你可以得到一个很好的概述here。

这里的解决方案包括将#main-content 添加到您的页脚选择器，或将样式声明为display: inline !important;。

【讨论】：

【解决方案4】：

也许我误解了你的问题，但如果你希望实际列表是内联的，这应该可以：

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

您的代码所做的是使列表元素显示为内联。

【讨论】：

【解决方案5】：

这是正确的行为，因为 id 被认为比类更具体，因此在类似的场景中使用它们将始终赋予 id 规则优先级。

解决此问题的最佳方法是定义更具体的规则。不过，这并不一定意味着按类定位所有内容，您可以从特定的 id 构建规则，就像 TommyB 的回答一样。但是应该避免!important：What are the implications of using "!important" in CSS?

【讨论】：

【解决方案6】：

请记住，ID 的优先级高于类，并且内联样式高于 ID。最好的解决办法是重构你的 CSS，从 #main-content 中删除 display:block;。甚至更好：让主要内容成为一个类。避免使用!important，这不是一个好习惯。

【讨论】：