Question

基本上我有一个动态创建的页面，如下所示：

<div id="content>
 DYNAMIC HERE
</div>

我无法控制div中的内容，但我知道会有很多表可能包含在其他div中。

例如

<div id="content">
     <div >
           <div >
            TABLE HTML HERE
            </div>
      </div>
</div>

但我永远不知道桌子会走多远。

所以我最好还是想做点什么：

#content table {
 style here
}

但这适用于该div中的所有表，即使它们嵌套了许多元素。

我怎么说这个div，其中的所有内容都是这些表格的风格？

Answer 1

是的，空格语法表示您要选择父级的任何后代，因此#content table没问题：

Answer 2

您当前的语法适用于Descendant Selector。后代选择器与child selectors类似，但它们不要求匹配元素之间的关系严格为父子关系。儿童选择器使用

#content > table

因此，您拥有的语法对于将样式应用于嵌套表是正确的。

例外情况（如here所述）是指specific selector更多。

Answer 3

使用#content table 应该定位#content中的所有表格。但是，如果有一个表格，例如#test从另一个样式表设置样式，则#test比#content table更具体，因此其他样式将取代您的。

你可以在样式表中使用!important否决该样式，你应该在每一行使用它，所以它不是最干净的解决方案。

例如：

#content table {
   color: green !important;
   background: red !important;
}