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

的问题很简单：CSS - 父元素覆盖子元素的属性

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

据我所知understrand这不应该发生。或者我错了，id元素会一直覆盖子类？

来源

2011-07-06 Łukasz Baran

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

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

来源

2011-07-06 08:18:15

也许我误解你的问题，但如果你想实际列表内联，这应该工作：

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

你的代码确实是让列表元素被显示为内联。

来源

2011-07-06 08:14:39 Petter

我觉得编号可能会优先等级然而这篇帖子可能有更多的信息 CSS class priorities

，你可以随时添加！在.footer-按钮UL和UL李声明重要或在th3e前面添加的ID .footer-按钮类

例如

#main-content .footer-buttons ul

来源

2011-07-06 08:14:43 TommyBs

你真的不应该使用'important'那里是增加你的规则，而不是特异性的选择！ – shanethehat

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

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

来源

2011-07-06 08:17:08 Chowlett

这是因为标识被认为比一类更具体，因此使用它们在类似的情况总是会给予ID规则优先正确的行为。

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

来源

2011-07-06 08:21:28 shanethehat

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

回答

相关问题