如何防止 CSS 继承？

How do I prevent CSS inheritance?

提问by

I have a hierarchical navigation menu in my sidebar that uses nested lists (<ul> and <li> 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:

我的侧边栏中有一个分层导航菜单，它使用嵌套列表（<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>

So the CSS has styles for #sidebar uland #sidebar ul lialready, but I'd like to add additional styles to #sidebar .top-level-navthat 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 #sidebar ulare now specific to certain classes?

所以CSS有样式#sidebar ul和#sidebar ul li了，但我想增加额外的样式到#sidebar .top-level-nav那些不会向下继承到其子儿。有什么方法可以简单地做到这一点，或者我是否需要重新排列所有样式，以便启用的样式#sidebar ul现在特定于某些类？

采纳答案by Scott

As of yet there are no parent selectors (or as Shaun Inmancalls them, qualified selectors), 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.

级联是级联样式表的重点，因此得名。

回答by Silviu Postavaru

You either use the child selector

您要么使用子选择器

So using

所以使用

#parent > child

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

将只使第一级子级应用样式。不幸的是，IE6 不支持子选择器。

Otherwise you can use

否则你可以使用

#parent child child

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

为低于一个级别的子项设置另一种特定样式。

回答by Boldewyn

There is a property called allin the CSS3 inheritance module. It works like this:

all在CSS3 继承模块中调用了一个属性。它是这样工作的：

#sidebar ul li {
  all: initial;
}

As of 2016-12, all browsers but IE/Edge and Opera Minisupport this property.

截至 2016-12，除 IE/Edge 和 Opera Mini之外的所有浏览器都支持此属性。

回答by Scott

You can use the * selectorto change the child styles back to the default

您可以使用* 选择器将子样式更改回默认值

example

例子

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

回答by Tu?rul

Wrapping with iframe makes parent css obsolete.

用 iframe 包装会使父 css 过时。

回答by Stickers

Short answer is: No, it's not possible to prevent CSS inheritance. You can only override the styles that are set on the parents. See the spec:

简短的回答是：不，不可能阻止 CSS 继承。您只能覆盖在父项上设置的样式。请参阅规范：

Every element in an HTML document will inherit all inheritable properties from its parent except the root element (html), which doesn't have a parent. -W3C

HTML 文档中的每个元素都将从其父元素继承所有可继承的属性，除了html没有父元素的根元素 ( )。- W3C

Apart from overriding every single inherited property. You can also use initialkeyword, e.g. color: initial;. It also can be used together with all, e.g. all: initial;, that will reset all properties at once. Example:

除了覆盖每个继承的属性。您也可以使用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>

Browser support tables according to Can I use...

根据我可以使用的浏览器支持表...

• all(Currently no support in both IE and Edge, others are good)
• initial(Currently no support in IE, others are good)

• all（目前IE和Edge都不支持，其他都不错）
• initial（目前IE不支持，其他都不错）

---

---

You may find it useful by using direct children selector >in some cases. Example:

在某些情况下，您可能会发现使用直接子选择器>很有用。例子：

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

The border style has been applied only to the direct children <li>s, as borderis an non-inherited property. But text color has been applied to all the children, as coloris an inherited property.

边框样式仅应用于直接子<li>元素，因为border它是非继承属性。但是文本颜色已应用于所有子项，这color是一个继承属性。

Therefore, >selector would be only useful with non-inherited properties, when it comes to preventing inheritance.

因此，>在防止继承时，选择器仅对非继承属性有用。

回答by stevenvh

You don't need the class reference for the lis. Instead of having CSS like

您不需要lis的类引用。而不是像 CSS

li.top-level-nav { color:black; }

you can write

你可以写

ul#sidebar > li { color:black; }

This will apply the styling only to lis that immediately descend from the sidebar ul.

这将仅将样式应用于li立即从侧边栏下降的 s ul。

回答by user2848911

For example if you have two div in XHTML document.

例如，如果您在 XHTML 文档中有两个 div。

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

Then try this in CSS.

然后在 CSS 中试试这个。

#div1 > #div2 > p{
    color: red;
}

affect only 'div2' paragraph.

仅影响“div2”段落。

#div1 > p {
    color: red;
} 

affect only 'div1' paragraph.

仅影响“div1”段落。

回答by Neil Richards

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 & 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

您可以使用 jQuery 之类的东西来“禁用”这种行为，尽管我认为这是一个很好的解决方案，因为您在 css 和 javascript 中获得了显示逻辑。尽管如此，根据您的要求，您可能会发现 jQuery 的 css utils 比尝试 hacky css 让您的生活更轻松，尤其是当您试图使其适用于 IE6 时

回答by Matthew Vines

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

只需在“#sidebar ul li”选择器中将它们设置回默认值