我如何防止CSSinheritance？
我有一个使用嵌套列表的分栏导航菜单（<ul>和<li>标签）。 我正在使用已经有列表项目的样式的预制主题，但是我想要改变顶层项目的样式，但不适用于子项目。 有没有一种简单的方法来将样式应用到顶级列表项标签，而没有将这些样式级联到其子项列表项？ 我明白，我可以显式地将重写样式添加到子项目，但我真的想避免重复所有样式代码，如果有一个简单的方法只是说“应用这些样式到这个类，而不是级联他们对任何儿童的要素“。 这里是我使用的HTML：
<ul id="sidebar"> <li class="top-level-nav"> <span>HEADING 1</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> <li class="top-level-nav"> <span>HEADING 2</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> </ul> 因此，CSS已经有“#sidebar ul”和“#sidebar ul li”的样式，但是我想添加其他样式到“#sidebar .top-level-nav”，不会级联到它的子节点。 有没有办法做到这一点，或者我需要重新排列所有的样式，所以“＃sidebar ul”上的样式现在特定于某些类。
到目前为止还没有父母select器（或者Shaun Inman称他们为合格的select器 ），所以你必须将样式应用到子列表项来覆盖父列表项的样式。
级联是层叠样式表的全部点，因此名称。
您可以使用子select器
所以使用
#parent > child
只会让一stream的孩子有风格应用。 不幸的是IE6不支持子select器。
否则，你可以使用
#parent child child
将另一个特定样式设置为多于一个以下级别的儿童。
在CSS3inheritance模块中有一个叫all的属性。 它是这样工作的：
#sidebar ul li { all: initial; }
截至2016-12， 除IE / Edge和Opera Mini之外的所有浏览器均支持此属性。
您可以使用*select器将子样式更改回默认值
例
#parent { white-space: pre-wrap; } #parent * { white-space: initial; }
用iframe包装使父css过时。
你可以使用类似jQuery的东西来“禁用”这种行为，尽pipe我不认为这是一个很好的解决scheme，因为你在css＆javascript中显示逻辑。 不过，根据您的要求，您可能会发现jQuery的css utils比尝试hacky css让生活更轻松，特别是如果您试图使其适用于IE6
例如，如果您在XHTML文档中有两个div。
<div id='div1'> <p>hello, how are you?</p> <div id='div2'> <p>I am fine, thank you.</p> </div> </div>
然后在CSS中试试这个。
#div1 > #div2 > p{ color: red; }
只影响'div2'段落。
#div1 > p { color: red; }
只影响'div1'段落。
你不需要里面的类参考。 而不是像CSS一样
li.top-level-nav { color:black; }
你可以写
ul#sidebar > li { color:black; }
这将只适用于立即从侧边栏下降的样式。
简单的回答是：不，不可能阻止CSSinheritance。 您只能覆盖父母上设置的样式。 看规格：
HTML文档中的每个元素都将inheritance除父元素（
html）以外的所有父元素的inheritance属性。 – W3C
除了压倒每一个inheritance的财产。 你也可以使用initial关键字，例如color: initial; 。 它也可以和all一起使用，例如all: initial; ，这将一次重置所有属性。 例：
.container { color: blue; font-style: italic; } .initial { all: initial; }
<div class="container"> The quick brown <span class="initial">fox</span> jumps over the lazy dog </div>
只需在“#sidebar ul li”select器中将其设置回默认值
