不要将CSS样式应用于子元素。

Question

不要将CSS样式应用于子元素。

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样式应用于“第二个div”，仅适用于第二个div，而不适用于第1或第3或更深的级别？

无法添加额外的类或ID！ Html是动态生成的且无法管理。

我会使用：

.xTable table .xTable

但这意味着第三个及更深层次的div也会受到影响。

不要使用ID！请使用CSS选择器。

谢谢！

- Max

7个回答

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
}

- Quentin

2

我会给第二个div添加一个额外的CSS类。

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

- Rob

1

同意。从语义标记的角度来看，这是最正确的解决方案。 - Adrian

HTML是动态生成的，但这不是我需要的。我需要纯CSS。 - Max

@gr9zev 你不能用它生成CSS类吗？还是说它太通用了，完全无法管理？ - Rob

我无法这样做，因为它是由复杂的第三方生成的。 - Max

1

这能不能只是这样呢：

然后这不就可以了吗：

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

????

- Michael

没有任何.xTable是另一个的子级。它们是在比那个更深层级的后代。 - Quentin

所有的.xTable已经有了它们自己的样式。只需要覆盖第二个，不应影响更深层次的元素。 - Max

请确保将 "body" 替换为您的容器元素。 - Michael

1

根据@Rob提供的信息，如果您无法添加类名，则我认为只有使用JavaScript或jQuery的方法。下面我提供了使用jQuery的解决方案。

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

查看更多关于它的信息这里

- Mr_Green

0

当您使用someelement someotherelement时，第一个元素的深度并不重要。但是，您可以在它们之间添加>来仅选择someelement的确切子元素someotherelement，如下所示：someelement > someotherelement，它将不会选择第一个选择器的子代的子代。

- Sheric

0

建议使用类组合。例如 <div class="table level-2" />

- Shuping

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Donnelly · Accepted Answer

为了兼容默认标记和那些能够正确添加 tbody 的浏览器，你需要使用以下代码：

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

JSFiddle示例。

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