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

Question

如何防止 CSS 在不给后代提供类或 ID 的情况下将我的样式应用于后代？例如

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

将为正确的表格设置样式，然后为该表格内的所有表格设置样式。我只想选择第一个表，而不是所有子表。

Answer 1

你说的不是级联，是简单的选择器匹配。

您可以采用几种方法。

第一种是使用更具体的选择器。如果您要设置样式的表是子表(而不是孙子或其他更深的后代)，那么您可以使用子选择器而不是后代选择器。这在 MSIE 6 中不支持。

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

第二个是向您实际想要设置样式的表格添加更多信息(使用 id 或 class)。

#mycontent table.tableThatIWantToStyle {}

第三个是利用级联并以不同的方式对更深的后代进行样式设置。

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

就是说，如果您在表格中有表格，那么很可能您在布局中滥用它们——这是错误的——您应该改正您的标记。