如何防止cssinheritance
以下是我使用的示例代码块。 我有两套CSS，并且想要应用到两个UL组件上。 然而，结果出来了，内部的“UL”将持有一些为其父母定义的CSS。 甚至一些在“b”中定义的css将被“a”所覆盖…恶梦…
我怎样才能停止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("..http://img.dovov.commodule-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("..http://img.dovov.commodule-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>
现在如果你不需要IE6的兼容性（参考Quirksmode ），你可以有以下的CSS
ul li { background:#fff; } ul>li { background:#f0f; }
>是一个直接的儿童操作员，所以在这种情况下，只有第一层的li将是紫色的。
希望这可以帮助
如果内部对象inheritance了你不想要的属性，你可以随时将它们设置为你想要的属性（即 – 属性是级联的，所以你可以在下层覆盖它们）。
例如
.li-a { font-weight: bold; color: red; } .li-b { color: blue; }
在这种情况下，即使你不想要，“li-b”仍然会大胆。 为了不粗暴，你可以这样做：
.li-b { font-weight: normal; color: blue; }
尽pipe目前尚不可用，但这篇引人入胜的文章讨论了Shadow DOM的使用，这是浏览器使用的一种技术，用来限制级联样式表级联的级别，可以这么说。 他没有提供任何API，因为似乎没有当前的库能够提供对这部分DOM的访问，但值得一看。 文章底部有链接到邮件列表，如果这吸引你。
非inheritance元素必须设置默认样式。
如果父类设置color:white和font-weight:bold样式，则没有inheritance的孩子必须在其课程中设置“颜色：黑色”和font-weight: normal 。 如果没有设置style ，元素从父母的风格。
简短的故事是，你不可能在这里做你想做的事。 没有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类恢复到父types。 你可以做的最好的是这样的：
.red, .red .notBlue { color: red; } .green, .green .notBlue { color: green; }
在CSS中使用通配符*select器覆盖元素所有属性的inheritance（通过将它们设置回它们的初始状态）。
其使用的一个例子：
li * { display: initial; }
用内部UL中的值覆盖存在于外部UL中的值。
您可以在iframe中加载新内容以避免cssinheritance。
