blocks|key|1322484|text|只需在"#sidebar+ul+li“选择器中将它们设置回默认值即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322485|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

just set them back to their defaults in the "#sidebar ul li" selector

blocks|key|1537833|text|您可以使用子选择器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1537834|所以使用|1537835|#parent+>+child|code-block|syntax|javascript|1537836|将仅使第一级子对象应用样式。不幸的是，IE6不支持子选择器。|1537837|否则，您可以使用|1537838|#parent+child+child|1537839|若要将另一个特定样式设置为低于多个级别的子项，请执行以下操作。|1537840|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You either use the child selector

So using

<pre class="lang-css prettyprint-override"><code>#parent &gt; child
</code></pre>

Will make only the first level children to have the styles applied. Unfortunately IE6 doesn't support the child selector.

Otherwise you can use 

<pre class="lang-css prettyprint-override"><code>#parent child child
</code></pre>

To set another specific styles to children that are more than one level below.

blocks|key|1322579|text|到目前为止，还没有父选择器(或者Shaun+Inman称之为qualified+selectors)，所以您必须将样式应用于子列表项，以覆盖父列表项上的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1322580|级联在某种程度上是级联样式表的要点，因此得名。|1322581|entityMap|0|LINK|mutability|MUTABLE|url|http://www.shauninman.com/|1|http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors^0|G|B|0|U|J|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

As of yet there are no parent selectors (or as <a href="http://www.shauninman.com" rel="noreferrer">Shaun Inman</a> calls them, <a href="http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors" rel="noreferrer">qualified selectors</a>), so you will have to apply styles to the child list items to override the styles on the parent list items.

Cascading is sort of the whole point of Cascading Style Sheets, hence the name.

blocks|key|1322621|text|你可以使用像jQuery这样的东西来“禁用”这个行为，尽管我不认为这是一个好的解决方案，因为你在css和javascript中得到了显示逻辑。不过，根据您的需求，您可能会发现jQuery的css使您的工作比尝试粗制滥造的css更容易，尤其是当您试图让它在IE6上工作时|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322622|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You could use something like jQuery to "disable" this behaviour, though I hardly think it's a good solution as you get display logic in css &amp; javascript. Still, depending upon your requirements you might find jQuery's css utils make life easier for you than trying hacky css, especially if you're trying to make it work for IE6

blocks|key|1322676|text|CSS3+inheritance+module中有一个名为all的属性。它是这样工作的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1322677|#sidebar+ul+li+{
++all:+initial;
}|code-block|syntax|javascript|1322678|从2016-12年度开始，all+browsers+but+IE/Edge+and+Opera+Mini支持此属性。|1322679|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-cascade/#all-shorthand|1|http://caniuse.com/#feat=css-all^0|T|3|0|N|0|0|0|D|13|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

There is a property called <code>all</code> in the <a href="http://www.w3.org/TR/css3-cascade/#all-shorthand" rel="noreferrer">CSS3 inheritance module</a>. It works like this:

<pre class="lang-css prettyprint-override"><code>#sidebar ul li {
 all: initial;
}
</code></pre>

As of 2016-12, <a href="http://caniuse.com/#feat=css-all" rel="noreferrer">all browsers but IE/Edge and Opera Mini</a> support this property.

blocks|key|1322732|text|例如，如果在XHTML文档中有两个div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1322733|<div+id='div1'>
++++hello,+how+are+you?
++++<div+id='div2'>
++++++++I+am+fine,+thank+you.
++++</div>
</div>|code-block|syntax|javascript|1322734|然后在CSS中尝试一下。|1322735|#div1+>+#div2+>+p{
++++color:+red;
}|1322736|仅影响“div2”段落。|1322737|#div1+>+p+{
++++color:+red;
}+|1322738|仅影响“div1”段落。|1322739|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

For example if you have two div in XHTML document.

<pre><code>&lt;div id='div1'&gt;
 &lt;p&gt;hello, how are you?&lt;/p&gt;
 &lt;div id='div2'&gt;
 &lt;p&gt;I am fine, thank you.&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

Then try this in CSS.

<pre><code>#div1 &gt; #div2 &gt; p{
 color: red;
}
</code></pre>

affect only 'div2' paragraph.

<pre><code>#div1 &gt; p {
 color: red;
} 
</code></pre>

affect only 'div1' paragraph.

blocks|key|1322791|text|您可以使用*+selector将子样式改回默认值|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1322792|示例|1322793|#parent+{
++++white-space:+pre-wrap;
}

#parent+*+{
++++white-space:+initial;
}|code-block|syntax|javascript|1322794|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/sel_all.asp^0|5|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

You can use the <a href="http://www.w3schools.com/cssref/sel_all.asp" rel="noreferrer">* selector</a> to change the child styles back to the default

example

<pre class="lang-css prettyprint-override"><code>#parent {
 white-space: pre-wrap;
}

#parent * {
 white-space: initial;
}
</code></pre>

blocks|key|1538148|text|使用iframe包装会使父css过时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1538149|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Wrapping with iframe makes parent css obsolete.

blocks|key|1322888|text|您不需要li的类引用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1322889|li.top-level-nav+{+color:black;+}|code-block|syntax|javascript|1322890|你可以写|1322891|ul#sidebar+>+li+{+color:black;+}|1322892|这将仅将样式应用于直接从侧边栏ul派生的li。|1322893|entityMap^0|4|2|0|0|0|0|F|2|K|2|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

You don't need the class reference for the <code>li</code>s. Instead of having CSS like

<pre><code>li.top-level-nav { color:black; }
</code></pre>

you can write

<pre><code>ul#sidebar &gt; li { color:black; }
</code></pre>

This will apply the styling only to <code>li</code>s that immediately descend from the sidebar <code>ul</code>.

blocks|key|1323026|text|您可以将不想继承任何样式的元素包装在没有样式的div中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1323027|如下所示：|1323028|<div+style='all:+revert+!important;'>
++Your+content+here
</div>|code-block|syntax|javascript|1323029|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can wrap the element that you don't want to inherit any styles in a div with no style.
Something like this:
<pre><code>&lt;div style='all: revert !important;'&gt;
 Your content here
&lt;/div&gt;
</code></pre>

I have a hierarchical navigation menu in my sidebar that uses nested lists (&lt;ul&gt; and &lt;li&gt; tags). I am using a pre-made theme that already has styles for list items, but I want to alter the style for the top-level items but NOT have it apply to the sub-items. Is there an easy way to apply styles to the top-level list item tag WITHOUT having those styles cascade down to its children list items? I understand that I can explicitly add overriding styles to the sub-items but I'd really like to avoid having to duplicate all of that style code if there is an easy way to just say "apply these styles to this class and DO NOT cascade them down to any children elements".
Here is the html I'm using:

<pre><code>&lt;ul id="sidebar"&gt;
 &lt;li class="top-level-nav"&gt;
 &lt;span&gt;HEADING 1&lt;/span&gt;
 &lt;ul&gt;
 &lt;li&gt;sub-heading A&lt;/li&gt;
 &lt;li&gt;sub-heading B&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li class="top-level-nav"&gt;
 &lt;span&gt;HEADING 2&lt;/span&gt;
 &lt;ul&gt;
 &lt;li&gt;sub-heading A&lt;/li&gt;
 &lt;li&gt;sub-heading B&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

So the CSS has styles for <code>#sidebar ul</code> and <code>#sidebar ul li</code> already, but I'd like to add additional styles to <code>#sidebar .top-level-nav</code> that do NOT cascade down to its sub-children.
Is there any way to do this simply or do I need to rearrange all of the styles so the styles that were on <code>#sidebar ul</code> are now specific to certain classes?

How do I prevent CSS inheritance?

jQuery

我的侧边栏中有一个分层导航菜单，它使用嵌套列表(和标签)。我正在使用一个预先制作的主题，该主题已经具有列表项的样式，但我希望更改顶层项的样式，但不将其应用于子项。有没有一种简单的方法可以将样式应用到顶级列表项标记中，而不让这些样式级联到它的子列表项？我知道我可以显式地将覆盖样式添加到子项中，但如果有一种简单的方法说“将...

问如何防止CSS继承？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止CSS继承？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止CSS继承？
EN