html - 风格所有的孩子

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 和其中的所有内容，我会怎么说表格的样式？

score 3 · Accepted Answer

是的，空格语法表明您要选择父级的任何后代，所以#content table很好：

score 2 · Accepted Answer

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

#content > table

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

一个例外（如此处所述）是如果您有更具体的选择器。

score -1 · Accepted Answer

使用#content table 应该针对#content 中的所有表。但是，如果有一个表格，例如#test，它的样式来自另一个样式表，#test则比更具体#content table，因此其他样式将覆盖您的样式。

您可以在样式表中使用该样式否决该!important样式，您应该在每一行都使用该样式，因此这不是最干净的解决方案。

例如：

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

3 回答 3