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样式应用于第二个div ，仅应用于第二个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 example

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

Answer 2

我可能只是给第二个div一个额外的css类。

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

Answer 3

使用: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
}

Answer 4

然后这可能不仅仅是：

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

????

Answer 5

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

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

详细了解here

Answer 6

使用someelement someotherelement时，第一个元素的深度并不重要。但是，您可以在它们之间添加>，以便仅选择someotherelement的{{1}}这样的孩子：someelement并且它不会选择子项的子项第一选择器。

Answer 7

建议使用课堂作文。例如<div class="table level-2" />

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

7 个答案: