不要将css样式应用于子元素

Question

我们有

<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样式应用于2nd div,仅应用于2nd div而不是1或3或更深？

没有办法添加额外的课程或IDS!Html是动态生成的,无法管理.

我会用

.xTable table .xTable

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

没有ID!请仅限CSS选择器.

谢谢!

Answer 1

要完全满足此默认标记和浏览器的要求,这些标记正确地添加了tbody尚未指定的位置,您需要使用:

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

JSFiddle示例.

这假设你的第一个<div class="xTable">没有父母以外的人<body>.如果不是这种情况body,请替换为您的父母.