如何避免继承父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

回答

相关问题