如何防止css继承

Question

下面是我使用的示例代码块.我有两套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>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

让我们说你有这个:

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

现在,如果您不需要IE6兼容性(Quirksmode参考),您可以拥有以下css

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

这>是一个直接的子操作符,所以在这种情况下只有第一级的lis是紫色的.

希望这可以帮助

Answer 2

如果内部对象继承了您不想要的属性,则可以始终将它们设置为您想要的属性(即 - 属性是级联的,因此您可以在较低级别覆盖它们).

例如

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

.li-b {
    color: blue;
}

在这种情况下,即使你不想要它,"li-b"仍然是粗体.为了使它不大胆你可以做:

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

Answer 3

非继承元素必须设置默认样式.
如果父类设置color:white和font-weight:bold样式,那么没有继承的子项必须font-weight: normal在其类中设置'color:black' .如果style没有设置,元素从父母那里得到他们的风格.

Answer 4

虽然目前还没有,但这篇引人入胜的文章讨论了Shadow DOM的使用,这是一种浏览器用来限制级联样式表级联的技术,可以这么说.他没有提供任何API,因为似乎没有当前的库能够提供对这部分DOM的访问,但值得一看.如果这引起了您的兴趣,那么文章底部会有指向邮件列表的链接.

Answer 5

短篇小说是不可能在这里做你想做的事.没有CSS规则可以"忽略其他一些规则".围绕它的唯一方法是为内部元素编写一个更具体的CSS规则,将其恢复为之前的状态,这是一个痛苦的屁股.

举个例子:

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

没有办法让.notBlue类恢复为父样式.你能做的最好的就是:

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

Answer 6

使用内部 UL 中的值覆盖外部 UL 中存在的值。