come impedire l'ereditarietà di css

Question

Di seguito sono riportati i blocchi di codice di esempio da utilizzare. Ho due set di css e voglio applicare su due componenti UL. tuttavia, il risultato viene fuori, l'interno "UL" manterrà alcuni dei css che hanno definito per il suo genitore. e anche alcuni dei css definiti in "b" saranno sostituiti da "a" ... incubo ...

come posso interrompere l'ereditarietà ???

<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

Override i valori presenti nella UL esterno con valori interno UL.

Answer 2

Se l'oggetto interno eredita le proprietà che non si desidera, è sempre possibile impostarle su ciò che si desidera (ovvero, le proprietà sono a cascata e quindi è possibile sovrascriverle al livello inferiore).

ad es.

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

.li-b { 
    color: blue; 
} 

In questo caso, "li-b" sarà ancora in grassetto anche se non lo si desidera. Per rendere non in grassetto si può fare:

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

Answer 3

Diciamo che avere questo:

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

Ora, se non avete bisogno di compatibilità IE6 (riferimento Quirksmode) si può avere il seguente CSS

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

Il > è un operatore diretto per bambini, quindi in questo caso solo il primo livello di li s sarà viola.

Spero che questo aiuti

Answer 4

La breve storia è che non è possibile fare ciò che si vuole qui. Non esiste una regola CSS che deve "ignorare qualche altra regola". L'unico modo per aggirarlo è scrivere una regola CSS più specifica per gli elementi interni che la riverificano a come era prima, il che è un dolore nel sedere.

Prendiamo l'esempio qui sotto:

<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> 

Non c'è modo di fare la classe .notBlue ripristinare lo stile genitore. Il meglio che puoi fare è questo:

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

Answer 5

Utilizzando il jolly * selector in CSS per ignorare eredità per tutti gli attributi di un elemento (impostando questi di nuovo al loro stato iniziale).

Un esempio del suo uso:

li * { 
    display: initial; 
} 

Answer 6

è possibile caricare il nuovo contenuto in un iframe per evitare css eredità.

Answer 7

Mentre questo non è attualmente disponibile, this fascinating article discute l'uso del DOM ombra, che è una tecnica utilizzata dai browser per limitare la cascata di fogli di stile a cascata, per così dire. Non fornisce alcuna API, poiché sembra che non ci siano librerie correnti in grado di fornire accesso a questa parte del DOM, ma vale la pena dare un'occhiata. Ci sono collegamenti alle mailing list in fondo all'articolo se questo ti incuriosisce. Elementi

Answer 8

non ereditati devono avere stili predefiniti impostati.
Se classe genitore impostato color:white e font-weight:bold stile quindi nessun bambino ereditato necessario impostare 'colore: il nero' e font-weight: normal nella loro classe. Se style non è impostato, gli elementi ottengono il loro stile dai loro genitori.