不要将css样式应用于子元素
[英]do not apply css style to child elements
问题描述
we have 
我们有
<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>
How do I apply custom css styles to 2nd div , only to 2nd div and not to 1 or 3 or deeper? 如何将自定义CSS样式应用于2nd div ，仅应用于2nd div而不是1或3或更深？
NO WAY TO ADD EXTRA CLASSES or IDS! 没有办法添加额外的课程或IDS！ Html is generated dynamically and is unmanageable. Html是动态生成的，无法管理。
I would use 我会用
.xTable table .xTable
but that means 3rd and deeper divs will be affected. 但这意味着第三和更深的div将受到影响。
no IDs! 没有ID！ Please CSS selectors only. 请仅限CSS选择器。
Thanks! 谢谢！
7 个解决方案
解决方案1
5 已采纳 2013-03-20 14:20:17
To cater fully for both this default markup and browsers which correctly add a tbody where it isn't already specified you'd need to use: 要完全满足此默认标记和浏览器的要求，这些标记正确地添加了尚未指定的tbody ，您需要使用：
body > .xTable > table > tr > td > .xTable,
body > .xTable > table > tbody > tr > td > .xTable {
...
}
JSFiddle example . JSFiddle示例 。
This assumes that your first <div class="xTable"> has no parents other than <body> . 这假设您的第一个<div class="xTable">没有除<body>之外的其他父项。 If this isn't the case then replace body with your parent. 如果不是这种情况，那么用您的父母替换body 。
解决方案2
2 2013-03-20 14:10:54
我可能只是给第二个div一个额外的css类。
<div class="xTable second-xTable-div"></div>
解决方案3
1 2013-03-20 14:18:26
Using a :not selector to exclude the parent and then having a long list of child combinators might do the job: 使用:not选择器排除父级，然后有一个很长的子组合子列表可能会完成这项工作：
:not(table) > .xTable > table > tr > td > .xTable
You might need to mix in the implicit tbody elements to that though. 您可能需要将隐式tbody元素混合到那里。
A nicer solution would probably be: 一个更好的解决方案可能是：
.xTable .xTable {
foo: bar;
}
.xTable .xTable .xTable {
foo: Whatever it would have been if the previous selector didn't match
}
解决方案4
1 2013-03-20 14:19:08
Then could this not be just: 那么这可能不仅仅是：
body > .xTable table tr td.xTable {STYLES}
???? ????
解决方案5
1 2013-03-20 14:19:44
As you are saying that you can't add class name as provided by @Rob, then I think there is only one way to go with javascript or jquery. 正如你所说，你不能添加@Rob提供的类名，那么我认为只有一种方法可以使用javascript或jquery。 Below I provided solution using jQuery. 下面我使用jQuery提供了解决方案。
$('.xTable:eq(1)').css('backgroundColor','green'); //Selects the second .xTable class div
解决方案6
0 2013-03-20 14:16:07
When you use someelement someotherelement it is not important how much deep you go in the first element. 当你使用someelement someotherelement元素时，第一个元素的深度并不重要。 But you can add a > between them to select only the someotherelement that is exactly the child of someelement like this: someelement > someotherelement and it will not select childs of childs of the first selector. 但是，你可以添加>它们之间只选择someotherelement这正是的孩子someelement这样的： someelement > someotherelement ，也不会选择第一选择的孩子的孩子的的。
解决方案7
0 2013-03-20 14:17:19
Class composition is recommended. 建议使用类成分。 for example <div class="table level-2" /> 例如<div class="table level-2" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.