cómo evitar que css herede

Question

A continuación se muestra el bloque de código de ejemplo que uso. Tengo dos juegos de css y deseo aplicarlos a dos componentes de UL. sin embargo, como resultado, el "UL" interno retendrá algunos de los css que se definieron para su elemento principal. e incluso algunos de los css definidos en "b" serán anulados por "a" ... pesadilla ...

¿cómo puedo detener la herencia?

<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 los valores presentes en el UL exterior con valores en UL interior.

Answer 2

Si el objeto interno está heredando propiedades que no desea, siempre puede establecerlas en lo que desea (es decir, las propiedades están en cascada, por lo que puede sobrescribirlas en el nivel inferior).

p. Ej.

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

.li-b { 
    color: blue; 
} 

En este caso, "li-b" seguirá siendo en negrita aunque no lo desee. Para hacer que no negrita que puede hacer:

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

Answer 3

Digamos que tiene esto:

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

Ahora bien, si usted no necesita compatibilidad con IE6 (de referencia en Quirksmode) que puede tener el siguiente CSS

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

el > es un operador de los niños directa, por lo que en este caso sólo el primer nivel de li s será púrpura.

Esperanza esto ayuda

Answer 4

La historia corta es que no es posible hacer lo que usted quiere aquí. No hay una regla CSS que sea "ignorar alguna otra regla". La única forma de evitarlo es escribir una regla de CSS más específica para los elementos internos que la revierte a como era antes, lo que es un dolor en el trasero.

Tomemos el ejemplo a continuación:

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

No hay manera de hacer que la clase .notBlue volver a la matriz estilo. Lo mejor que puede hacer es esto:

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

Answer 5

Usando el comodín * selector en el CSS para anular la herencia de todos los atributos de un elemento (mediante el establecimiento de éstos de nuevo a su estado inicial).

Un ejemplo de su uso:

li * { 
    display: initial; 
} 

Answer 6

que es posible cargar el nuevo contenido en un iframe para evitar la herencia css.

Answer 7

Si bien esto no está actualmente disponible, this fascinating article analiza el uso de Shadow DOM, que es una técnica utilizada por los navegadores para limitar la cascada de hojas de estilos en cascada, por así decirlo. Él no proporciona ninguna API, ya que parece que no hay bibliotecas actuales que puedan proporcionar acceso a esta parte del DOM, pero vale la pena echarle un vistazo. Hay enlaces a listas de correo en la parte inferior del artículo si esto te intriga.

Answer 8

Los elementos no heredados deben tener un conjunto de estilos predeterminado.
Si la clase primaria establece color:white y font-weight:bold estilo, entonces ningún hijo heredado debe establecer 'color: negro' y font-weight: normal en su clase. Si style no está configurado, los elementos obtienen su estilo de sus padres.