Html 如何防止css继承
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1304465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to prevent css inherit
提问by jojo
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...
下面是我使用的示例代码块。我有两套 css，想应用到两个 UL 组件上。然而，结果出来了，内部的“UL”将保存一些为其父定义的css。甚至“b”中定义的一些css也会被“a”覆盖……噩梦……
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:
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: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;
}
回答by Darko Z
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
现在，如果您不需要 IE6 兼容性（参考Quirksmode），您可以使用以下 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.
The>是直接子运算符，因此在这种情况下，只有lis的第一级将是紫色的。
Hope this helps
希望这可以帮助
回答by RodeoClown
If the inner object is inheriting properties you don't want, you can always set them to what you do want (ie - the properties are cascading, and so you can overwrite them at the lower level).
如果内部对象继承了您不想要的属性，您始终可以将它们设置为您想要的（即 - 属性是级联的，因此您可以在较低级别覆盖它们）。
e.g.
例如
.li-a {
font-weight: bold;
color: red;
}
.li-b {
color: blue;
}
In this case, "li-b" will still be bold even though you don't want it to be. To make it not bold you can do:
在这种情况下，“li-b”仍然是粗体，即使您不希望它如此。为了让它不大胆，你可以这样做：
.li-b {
font-weight: normal;
color: blue;
}
回答by eykanal
While this isn't currently available, this fascinating articlediscusses the use of the Shadow DOM, which is a technique used by browsers to limit how far cascading style sheets cascade, so to speak. He doesn't provide any APIs, as it seems that there are no current libraries able to provide access to this part of the DOM, but it's worth a look. There are links to mailing lists at the bottom of the article if this intrigues you.
虽然目前尚不可用，但这篇引人入胜的文章讨论了 Shadow DOM 的使用，可以这么说，这是浏览器用来限制级联样式表级联多远的一种技术。他没有提供任何 API，因为目前似乎没有任何库能够提供对 DOM 的这一部分的访问，但值得一看。如果这引起了您的兴趣，文章底部有指向邮件列表的链接。
回答by shonhloi
Non-inherited elements must have default styles set.
If parent class set color:whiteand font-weight:boldstyle then no inherited child must set 'color:black' and font-weight: normalin their class. If styleis not set, elements get their style from their parents.
非继承元素必须设置默认样式。
如果父类设置color:white和font-weight:bold样式，则没有继承的子类必须font-weight: normal在他们的类中设置 'color:black' 。如果style未设置，则元素从其父项获取其样式。
回答by nickf
The short story is that it's not possible to do what you want here. There's no CSS rule which is to "ignore some other rule". The only way around it is to write a more-specific CSS rule for the inner elements which reverts it to how it was before, which is a pain in the butt.
简短的故事是在这里不可能做你想做的事。没有“忽略其他规则”的 CSS 规则。解决它的唯一方法是为内部元素编写一个更具体的 CSS 规则，将其恢复到以前的状态，这很麻烦。
Take the example below:
以下面的例子为例：
<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>
There's no way to make the .notBlueclass revert to the parent styling. The best you can do is this:
没有办法让.notBlue类恢复到父样式。你能做的最好的是：
.red, .red .notBlue {
color: red;
}
.green, .green .notBlue {
color: green;
}
回答by nickf
Using the wildcard * selectorin CSS to override inheritance for all attributes of an element (by setting these back to their initial state).
在 CSS 中使用通配符* 选择器来覆盖元素所有属性的继承（通过将这些属性设置回它们的初始状态）。
An example of its use:
其使用示例：
li * {
display: initial;
}
回答by rahul
Override the values present in the outer UL with values in inner UL.
用内部 UL 中的值覆盖外部 UL 中存在的值。
回答by Nicholas Vincent DiSanto
you can load the new content in an iframe to avoid css inheritance.
您可以在 iframe 中加载新内容以避免 css 继承。
