como evitar css herdar [duplicado]
Esta questão já tem uma resposta aqui:
Como evito a herança de CSS? 10 respostasAbaixo está o bloco de código de amostra que eu uso. Eu tenho dois conjuntos de css e quero aplicar em dois componentes UL. no entanto, o resultado sair, o "UL" interno conterá alguns dos css definidos para seu pai. e até mesmo alguns dos css definidos em "b" serão anulados por "a" ... pesadelo ...
Como posso parar a herança?
<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 {cor: # 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;
}