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

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

e.g。

#main-content .footer-buttons ul

Answer 3

是的，具有ID的选择器将始终覆盖仅具有类的选择器。这是由于“特异性”;你可以得到一个很好的概述here。

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

Answer 4

也许我误解了你的问题，但是如果你想让实际的列表内联，那么这应该有效：

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

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

Answer 5

这是正确的行为，因为id被认为比类更具体，因此在类似的场景中使用它们总是会给id规则优先。

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

Answer 6

请记住，ID的优先级高于类，并且内联样式的ID高于ID。最好的解决方法是重构CSS，从CriteriaBuilder builder = getSession().getCriteriaBuilder(); CriteriaQuery<S> criteria = builder.createQuery(targetEntityClass); Root<S> root = criteria.from(targetEntityClass); criteria.where(builder.equal(root.get("id"), id)); List<S> resultList = getSession().createQuery(criteria).getResultList(); if (resultList.size() > 1) { throw new NonUniqueResultException(); } return resultList.isEmpty() ? Optional.empty() : Optional.of(resultList.get(0));中删除display:block;。甚至更好：使主要内容成为一门课。避免使用#main-content，这不是一个好习惯。

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

6 个答案: