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 { 颜色：＃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; }

>是直接子操作符，因此在这种情况下，li的第一级只有紫色。

希望这有帮助

Answer 2

如果内部对象继承了您不想要的属性，您可以随时将它们设置为您想要的属性（即 - 属性是级联的，因此您可以在较低级别覆盖它们。）

e.g。

.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样式，则没有继承的子项必须在其类中设置'color：black'和font-weight: normal。如果未设置style，则元素会从父母那里获得他们的风格。

Answer 4

虽然目前还没有，this fascinating article讨论了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

使用CSS中的通配符* selector来覆盖元素的所有属性的继承（通过将它们设置回初始状态）。

使用它的一个例子：

li * {
   display: initial;
}

Answer 7

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

Answer 8

您可以在iframe中加载新内容以避免css继承。

如何防止css继承

8 个答案: