cómo prevenir la herencia de css [duplicar]
Esta pregunta ya tiene una respuesta aquí:
¿Cómo puedo prevenir la herencia CSS? 10 respuestasA continuación se muestra el bloque de código de ejemplo que utilizo. Tengo dos juegos de css y quiero aplicar dos componentes UL. sin embargo, el resultado, el "UL" interno mantendrá algunos de los css que se definieron para su padre. 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;
}