1

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

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

4

3 回答 3

3

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

http://jsfiddle.net/XnnLG/

于 2013-07-30T14:06:08.210 回答
2

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

#content > table 

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

一个例外(如此所述)是如果您有更具体的选择器

于 2013-07-30T14:09:38.553 回答
-1

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

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

例如:

#content table {
   color: green !important;
   background: red !important;
}
于 2013-07-30T14:08:30.173 回答