如何防止CSS继承？

Question

我的侧边栏中有一个分层导航菜单,它使用嵌套列表(<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"上的样式现在特定于某些类.

Answer 1

您可以使用子选择器

所以使用

#parent > child

将仅使第一级孩子应用样式.不幸的是,IE6不支持子选择器.

否则你可以使用

#parent child child

为下面超过一个级别的子项设置另一个特定样式.

Answer 2

到目前为止还没有父选择器(或Shaun Inman称之为限定选择器),因此您必须将样式应用于子列表项以覆盖父列表项上的样式.

层叠是层叠样式表的整个点,因此得名.

Answer 3

有一个名为属性all中CSS3继承模块.它的工作原理如下:

#sidebar ul li {
  all: initial;
}

截至2016-12,所有浏览器,但IE/Edge和Opera Mini都支持此属性.

Answer 4

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

例

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

#parent * {
    white-space: initial;
}

Answer 5

使用iframe包装会使父css过时.

Answer 6

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

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

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

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

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

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

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

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

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