6

我们有

<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 将受到影响。

没有身份证！请仅使用 CSS 选择器。

谢谢！

4

7 回答 7

6

为了完全满足此默认标记和正确添加tbody尚未指定的浏览器的浏览器，您需要使用：

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

JSFiddle 示例。

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

于 2013-03-20T14:20:17.800 回答
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
}
于 2013-03-20T14:18:26.970 回答
2

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

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

于 2013-03-20T14:10:54.503 回答
1

那么这不只是：

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

？？？

于 2013-03-20T14:19:08.237 回答
1

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

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

在这里查看更多信息

于 2013-03-20T14:19:44.807 回答
0

When you use someelement someotherelement it is not important how much deep you go in the first element. 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.

于 2013-03-20T14:16:07.820 回答
0

推荐课堂组合。例如<div class="table level-2" />

于 2013-03-20T14:17:19.457 回答