Comment éviter l'héritage parent css

J'ai ma page de connexion qui contient une autre div d'informations de connexion (nom d'utilisateur et mot de passe). Mon paramètre css pour la couleur de l'en-tête div est WHITE. Cependant, j'aimerais que le libellé de la div Login soit VERT. J'ai créé un style css différent pour le div Login, mais il applique toujours le css de l'en-tête div parent. Ci-dessous mon code:Comment éviter l'héritage parent 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; 
}

Source

2010-11-06 Callie

S'il vous plaît modifier la question lorsque vous souhaitez ajouter plus d'informations, ou laisser des commentaires pour répondre directement aux réponses. En outre, j'ai reformaté votre code pour plus de lisibilité, donc vous pouvez vouloir le vérifier pour m'assurer que je l'ai "corrigé" correctement. :) Bienvenue sur Stack Overflow. –

La propriété blanche prend la priorité parce que ce sélecteur est plus "spécifique" dans le schéma des sélecteurs CSS.

Ajouter un sélecteur séparé appliquant la couleur aux TDs dans la bannière de connexion:

#bannerLogin td { 
    color: green; 
}

Vous pouvez regarder cette question pour en savoir plus sur la priorité de sélection: CSS: Understanding the selector's priority/specificity

Source

2010-11-06 04:04:30

... et assurez-vous que c'est bien après la déclaration "#header td, #footer" Si les sélecteurs ont la même spécificité, alors le dernier gagne. –

Parce que le #header td applique à la table cellule qui se trouve plus bas dans l'arborescence HTML que le #bannerLogin (qui s'applique à la division bannerLogin).

Une façon de résoudre ceci: Prenez la couleur de la définition #bannerLogin et le mettre dans quelque chose de plus spécifique, par exemple:

#bannerLogin td { 
    color: green; 
}

Source

2010-11-06 04:05:12

Comment éviter l'héritage parent css

Répondre

Questions connexes