Question

我的登录页面包含另一个登录信息div（用户名和密码）。我的div标题颜色的CSS设置是WHITE。但是，我希望Login div中的措辞是绿色的。我为Login div创建了一个不同的CSS样式，但它仍然应用来自父div头的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;
}

Answer 1

white属性具有优先级，因为该选择器在CSS选择器的方案中更具“特异性”。

添加一个单独的选择器，将颜色应用于登录横幅中的TD：

#bannerLogin td {
    color: green;
}

您可以查看此问题，详细了解选择器优先级：CSS: Understanding the selector's priority / specificity

Answer 2

因为#header td适用于HTML树下面的表格单元格而不是#bannerLogin（适用于bannerLogin div）。

解决此问题的一种方法：从#bannerLogin定义中取出颜色并将其放入更具体的内容中，例如：

#bannerLogin td {
  color: green;
}

如何避免继承父css

2 个答案: