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 - 父元素覆蓋子元素的屬性

回答

相關問題