如何防止css继承 [英] how to prevent css inherit

问题描述

下面是我使用的示例代码块。
我有两套css，想要应用到两个UL组件上。
然而，结果出来，内部UL将保存为其父的定义的一些css。
，甚至在b中定义的一些css将被a...重写...噩梦...

停止继承？

 < ul class =moduleMenu-ul> 
 / * for loop begin * / 
< li class =moduleMenu-li> 
< a>< / a> 
< / li> 
 / * for loop end * / 
< li class =moduleMenu-li> 
< a>在上方的div上将显示< / a> 
< div id =extraModuleMenuOptions> 
< ul class =flow-ul> 
 / * for loop begin * / 
< li class =flow-li> 
< a class =flow-a>< / a> 
< / li> 
 / * for循环结束* / 
< / ul> 
< / div> 
< / li> 
< / ul 
  

CSS：

$ b b

  .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 .module菜单栏a：hover {
颜色：＃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; 
} 
  

解决方案

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

现在，如果你的DONT需要IE6兼容性（参考 Quirksmode ）您可以拥有以下css

  ul li {background：#fff; } 
 ul> li {background：＃f0f; } 
  

> 因此在这种情况下， li 的第一级将是紫色的。

希望这有助于

Below are the sample code block i use. I have two set of css, and want to apply onto two UL component. however, the result come out, the inner "UL" will hold some of the css which defined for its parent. and even some of the css defined in "b" will be override by "a"... nightmare...

how can i stop the inheritance???

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

解决方案

lets say you have this:

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

Now if you DONT need IE6 compatibility (reference at Quirksmode) you can have the following css

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

The > is a direct children operator, so in this case only the first level of lis will be purple.

Hope this helps

这篇关于如何防止css继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！