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

Question

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

#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; }

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