Question

如何防止CSS应用我的样式做后代的后代而不给它们类或id？ e.g。

#mycontent table {border: 1px solid red;}

将样式化正确的表，然后也是那个表中的所有表。我想要的只是第一个被选中的表，而不是所有的子表。

Answer 1

你描述的不是级联，它是简单的选择器匹配。

您可以采取一些方法。

首先是使用更具体的选择器。如果你要设置样式的表是一个孩子（而不是一个grandchilder或其他更深的后代），那么你可以使用子选择器而不是后代选择器。这在MSIE 6中支持。

#mycontent > table { border: 1px solid red; }

第二种是向实际想要设置样式的表中添加更多信息（带有id或类）。

#mycontent table.tableThatIWantToStyle {}

第三是利用级联并以不同的方式对更深层次的后代进行风格化。

#mycontent table { border: 1px solid red; }
#mycontent table table { border: none; }

也就是说，如果你在表格中有表格，那么你可能会滥用它们进行布局 - 这是错误的 - 你应该修改你的标记。

Answer 2

您可以使用子选择器：

#mycontent > table {border: 1px solid red;}

问题是IE6不支持子选择器。如果你需要支持该浏览器，你将不得不做更多笨重的事情：

#mycontent table {border: 1px solid red;}
#mycontent table table {border: none;}

或者，您可以使用类来区分表，这样就不会产生这种级联效应。

Answer 3

为您的表提供类型（类）：

table.mycontent {border: 1px solid red;}

不应使用.mycontent标记所有子表。然后该样式将仅应用于父表。

Answer 4

为什么不直接给那个HTML表标记一个id，'mycontent'，然后按如下方式编写CSS：

table#mycontent {
  border: 1px solid red;
}

Answer 5

我有类似的困境，这就是我如何解决它。我的解决方案类似于其他人发布的关于使用更具体的选择器进行适当匹配的解决方案。

假设我有一个嵌套的span，如下所示，我不希望样式级联到它。

<span class="boldText">
     some bolded text
     <span class="italicText">some italic text</span>
</span>

换句话说，我希望它显示为“一些粗体文字 一些斜体文字”而不是“一些粗体文字一些斜体文字 “（反之亦然）。通过设置一个特定的选择器来清除嵌套子节点上的这些样式，可以按如下方式实现。

span span {
   font-weight:normal; /*clear bold style from 'cascading' by specifying it*/
   font-style:normal; /*clear italic style from 'cascading' by specifying it*/
}
.boldText {
   font-weight:bold;
}
.italicText {
   font-style:italic;
}

“跨度”选择器可以确保嵌套跨度的样式设置为从父跨度覆盖正常级联样式所需的任何内容，将它们设置回“正常”非样式状态。然后，接下来应用跨度本身的特定boldText或italicText类，使该跨度的内容为粗体或斜体（或两者），因为它们是更具体的选择器。

这里的便利是我不再需要担心级联到子级的父级的字体格式样式。我可以简单地将适当的格式化类添加到任何范围，并且只应用该类，而不使用父类。

我可以很容易地为所有嵌套的spans添加“.clearBold”和“.clearItalic”类，但这样更干净，导致我的应用程序中的代码更少。

如何避免CSS选择器应用于多个级别的后代

5 个答案: