不css样式应用到子元素

问题描述：

<div class="xTable"> 
<table> 
    <tr> 
    <td> 
    <div class="xTable"> 
    <table> 
     <tr> 
     <td> 
     <div class="xTable"> 
     <table>...</table> 
     </div> 
     </td> 
     </tr> 
    </table>  
    </div> 
    </td> 
    </tr> 
</table> 
</div>

我如何申请自定义CSS样式第二格，只有2次DIV，而不是1或3或更深？

无法添加额外课程或IDS！ Html是动态生成的，无法管理。

我会用

.xTable table .xTable

但是这意味着第三和更深的div将受到影响。

没有ID！请仅使用CSS选择器。

谢谢！

答

为了充分满足这两种标记的默认浏览器和其正确添加它是不是已经指定你需要使用一个tbody：

body > .xTable > table > tr > td > .xTable, 
body > .xTable > table > tbody > tr > td > .xTable { 
    ... 
}

JSFiddle example。

这假设您的第一个<div class="xTable">除<body>之外没有父母。如果情况并非如此，请将您的父母更换为body。

所以在复杂层次结构的情况下，我需要指定每个孩子？我会尝试的。谢谢 – 2013-03-20 14:22:26

''''选择器选择[child]（http://www.w3.org/TR/selectors/#child-combinators）元素，没有更深层次的东西。 'body> .xTable> .xTable'不会工作，因为'.xTable'不是'.xTable'的直接子元素。同样，'body> .xTable> table .xTable'会将样式应用于第一个'.xTable'子表'中包含的所有'.xTable'元素（因此样式化第二个和第三个'.xTable'元素）。为了选择更深的元素，你必须像这样工作。 'z的父母'，而不是'父母或祖父母的父母'或'祖父母'。 – 2013-03-20 14:28:00

thx，这个想法应用了，问题解决了。 – 2013-03-20 14:33:49

答

我可能会给第二个div额外的CSS类。

<div class="xTable second-xTable-div"></div>

同意。这是从语义标记角度来看最正确的解决方案。 – Adrian 2013-03-20 14:12:35

html是动态生成的，事实并非如此。我需要纯粹的CSS。 – 2013-03-20 14:14:05

@ gr9zev你不能用它生成css类吗？或者它是通用的，它是完全不可管理的？ – Rob 2013-03-20 14:15:15

答

当您使用someelement someotherelement它并不重要多少深，你的第一个元素去。但是，您可以在它们之间添加一个>，以便只选择someotherelement，它完全是someelement的孩子，如下所示：someelement > someotherelement并且它不会选择第一个选择器的孩子的孩子。

答

建议课程组合。例如<div class="table level-2" />

答

使用:not选择排除父再有孩子的组合子一长串可能做的工作：

:not(table) > .xTable > table > tr > td > .xTable

您可能需要在隐含TBODY元素，虽然混合。

一个更好的解决办法可能是：

.xTable .xTable { 
    foo: bar; 
} 

.xTable .xTable .xTable { 
    foo: Whatever it would have been if the previous selector didn't match 
}

答

那么可能这不只是：

body > .xTable table tr td.xTable {STYLES}

????

没有'.xTable'是另一个*孩子*。他们的后代比这更深层次。 – Quentin 2013-03-20 14:19:57

所有的.xTable都已经有了它们的样式。只有第二个需要被覆盖，更深层次的元素不能被影响。 – 2013-03-20 14:20:39

查看上面的修改。 – Michael 2013-03-20 14:24:02

答

正如你所说，你不能添加@Rob提供的类名，那么我认为只有一种方法去与JavaScript或jQuery。下面我使用jQuery提供了解决方案。

$('.xTable:eq(1)').css('backgroundColor','green'); //Selects the second .xTable class div

检查更多关于它here

不css样式应用到子元素

相关推荐