如何避免繼承父css

我有我的登錄頁面，其中包含另一個登錄信息的div（用戶名和密碼）。我的CSS設置爲div標題顏色是白色。但是，我希望登錄div中的措辭是綠色的。我爲Login div創建了不同的css樣式，但它仍然應用父div div標題中的css。下面是我的代碼：如何避免繼承父css

的login.jsp

<div id="header"> 
    <div id="bannerLogin" > 
     <table width="300px" border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td align="right"> 
        <span class="writeupCopy"> 
         <bean:message key="login.userId" bundle="label"/> 
        </span> 
       </td> 
       <td align="left"> 
        <html:text styleId="username" property="username" size="20" tabindex="0" /> 
       </td> 
      </tr> 
      <tr> 
       <td align="right"> 
        <span class="writeupCopy"> 
         <bean:message key="login.password" bundle="label"/> 
        </span> 
       </td> 
       <td align="left" valign="bottom"> 
        <input name="password" size="20" tabindex="0" value="" id="password" type="password">&nbsp; 
        <input name="btnSave" id="submit" type="image" src="${initParam.CONTEXT_PATH}/images/common/login.arrow.png" height="20px" width="20px" border="0"> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div>

stylesheet.css中

#header, #footer { 
    width: 100%; 
    border-collapse: collapse; 
    background-color: #4681C4; 
} 

#header td, #footer td { 
    color: white; 
    line-height: 1.2em; 
    padding: 1px 5px; 
} 

#bannerLogin { 
    color: green; 
    float:right; 
    height:104px; 
    margin-left:0; 
    margin-top:0; 
    width:300px; 
}

來源

2010-11-06 Callie

當你想添加更多的信息，請編輯的問題，或發表評論直接回復答案。此外，我將您的代碼重新格式化爲可讀性，因此您可能需要檢查它以確保我「正確」修復它。 :)歡迎來到堆棧溢出。 – 2010-11-06 13:07:30

白色屬性的優先級更高，因爲選擇更「具體」的方案的CSS選擇器。

添加在登錄提示將顏色與陣單獨選擇：

#bannerLogin td { 
    color: green; 
}

你可以看一下這個問題了更多選擇的優先級：CSS: Understanding the selector's priority/specificity

來源

2010-11-06 04:04:30

...並確保它是在'#header td，#footer td'聲明之後。如果選擇器具有相同的特性，那麼最後一個獲勝。 – 2010-11-06 04:07:50

因爲#header td適用於表這個單元格比在#bannerLogin（它適用於bannerLogin div）的HTML樹下更深。

解決的方法之一：從#bannerLogin定義取出的顏色，並把它變成更具體的東西，如：

#bannerLogin td { 
    color: green; 
}

來源

2010-11-06 04:05:12

如何避免繼承父css

回答

相關問題