comment empêcher les css d'hériter

Question

Ci-dessous sont l'exemple de bloc de code que j'utilise. J'ai deux set de feuilles de style css, et que vous voulez appliquer à deux composants UL. cependant, le résultat, l'intérieur "UL" tiendra certains de la css qui a défini pour son parent. et même certains de la css définis dans le "b" sera remplacer par "un"... cauchemar...

comment puis-je arrêter l'héritage???

<ul class="moduleMenu-ul">
    /* for loop begin */
        <li class="moduleMenu-li">
                  <a></a>
        </li>
    /* for loop end */
     <li class="moduleMenu-li">
          <a>On Over the div below will be show</a>
          <div id="extraModuleMenuOptions">
                <ul class="flow-ul">
                 /*for loop begin*/
                    <li class="flow-li">
                          <a class="flow-a"></a>
                    </li>
                 /*for loop end*/
                </ul>
          </div>
     </li>
</ul

CSS:

.moduleMenu-ul {
    width: 100%;
    height: 43px;
    background: #FFF url("../images/module-menu-bg.gif") top left repeat-x;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.moduleMenu-ul .moduleMenu-li {
    display: block;
    float: left;
    margin: 0 0 0 5px;
}

.moduleMenu-ul .moduleMenu-li a {
    height: 43px;
    color: #777;
    text-decoration: none;
    display: block;
    float: left;
    line-height: 200%;
    padding: 8px 15px 0;
    text-transform:capitalize;
}

.moduleMenu-ul .moduleMenu-li a:hover { color: #333; }

.moduleMenu-ul .moduleMenu-li a.current{
    color: #FFF;
    background: #FFF url("../images/module-menu-current-bg.gif") top left repeat-x;
    padding: 5px 15px 0;
}

#extraModuleMenuOptions {
    z-index:99999;
    visibility:hidden;
    position:absolute;
    color:#FFFFFF;
    background-color:#236FBD;
}

#extraModuleMenuOptions .flow-ul {
    text-align:left;
}

#extraModuleMenuOptions .flow-ul .flow-li {
    display:block;
}

#extraModuleMenuOptions .flow-ul .flow-li .flow-a {
    color:#FFFFFF;
}

Answer 1

Disons que vous avez ceci:

 <ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
<ul>
 

Maintenant si vous N'AVEZ PAS besoin de la compatibilité IE6 (référence en mode Quirksmode ), vous pouvez avoir les fichiers css suivants

 ul li { background:#fff; }
ul>li { background:#f0f; }
 

Le > est un opérateur direct pour les enfants, de sorte que dans ce cas, seul le premier niveau de li s sera violet.

J'espère que cela t'aides

Answer 2

Si l'objet interne hérite de propriétés que vous ne souhaitez pas, vous pouvez toujours les définir comme vous le souhaitez (par exemple, les propriétés sont en cascade et vous pouvez donc les écraser au niveau inférieur).

par exemple

 .li-a {
    font-weight: bold;
    color: red;
}

.li-b {
    color: blue;
}
 

Dans ce cas, "li-b" sera toujours audacieux même si vous ne le souhaitez pas. Pour que ce ne soit pas audacieux, vous pouvez faire:

 .li-b {
    font-weight: normal;
    color: blue;
}
 

Answer 3

Les styles non hérités doivent avoir des styles par défaut définis.
Si la classe parent définit les styles color:white et font-weight:bold , aucun enfant hérité ne doit définir 'couleur: noir' et font-weight: normal dans sa classe. Si style n'est pas défini, les éléments obtiennent leur style de leurs parents.

Answer 4

Alors que ce n'est actuellement pas disponible, ce passionnant article traite de l'utilisation de l'Ombre DOM, qui est une technique utilisé par les navigateurs pour limiter feuilles de style en cascade en cascade, pour ainsi dire. Il ne propose pas d'Api, comme il semble qu'il n'existe pas de bibliothèques en mesure de fournir l'accès à cette partie du DOM, mais il vaut la peine de regarder. Il y a des liens vers des listes de diffusion au bas de l'article si cette intrigue vous.

Answer 5

La courte histoire est qu'il n'est pas possible de faire ce que vous voulez ici. Il n'y a pas de règle CSS qui consiste à "ignorer une autre règle". Le seul moyen de contourner ce problème est d'écrire une règle CSS plus spécifique pour les éléments internes, ce qui la ramènera à son état antérieur, ce qui est pénible.

Prenons l'exemple ci-dessous:

 <div class="red"> <!-- ignore the semantics, it's an example, yo! -->
    <p class="blue">
        Blue text blue text!
        <span class="notBlue">this shouldn't be blue</span>
    </p>
</div>
<div class="green">
    <p class="blue">
        Blue text!
        <span class="notBlue">blah</span>
    </p>
</div>
 

Il n'y a aucun moyen de faire en sorte que la classe .notBlue revienne au style parent. Le mieux que vous puissiez faire est la suivante:

 .red, .red .notBlue {
    color: red;
}
.green, .green .notBlue {
    color: green;
}