Question

让我们直截了当地说，我已经创建了这个例子来更好地理解我的观点：

HTML： 表1

<table class="testClass">
    <tr>
        <td>Inner table
            <table>
                <tr>
                    <td>Hello</td>
                    <td>Testing testing</td>
                    <td>Bye</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<br />
<br />
<br />Table 2
<table class="testClass">
    <tr>
        <td colspan="3">stuff</td>
    </tr>
    <tr>
        <td>Left</td>
        <td>Middle</td>
        <td>Right</td>
    </tr>
</table>

CSS：

table {
    border: 2px solid red;
    width: 100%;
}
td {
    border: 2px solid blue;
}
/* Relative CSS */
 .testClass tr:last-child td:nth-child(1) {
    width: 15px;
}
.testClass tr:last-child td:nth-child(2) {
    width: auto;
}
.testClass tr:last-child td:nth-child(3) {
    width: 15px;
}

所以我们有两个表，都有相同的类。 Table 1内有一个表格，Table 2没有。

我发现的问题是使用我创建的CSS我无法阻止.testClass的受影响子表（内表）的样式。我当时认为可以使用:not()但我无法找到使用它的解决方案，因为我觉得这不应该那么难。

是否可以仅影响父级到达子表的样式中的父级？

注意：只能更改CSS而不是HTML。可以使用CSS3！

我希望这是有道理的，如果我需要更清楚，请发表评论。

Answer 1

选择第一级孩子并应用它。

   .testClass > tbody > tr:last-child > td:nth-child(1) {
      width: 15px;
   }
  .testClass > tbody > tr:last-child > td:nth-child(2) {
     width: auto;
   }
   .testClass > tbody > tr:last-child > td:nth-child(3) {
      width: 15px;
   }

DEMO

Answer 2

您可以添加样式声明，例如

table table { border: none; }

覆盖父table - 声明的样式。这样，没有嵌套表将具有边框。同样适用于td s。

另一种解决方案是：

table:not(.testClass) {
    border: 0px none; 
}

删除所有不的表格的边框已应用testClass。我测试并看到了这项工作（在下面的小提琴的另一个版本中）。

这里有一个小提示你的代码，还有两个额外的声明，删除内部表格的边框： http://jsfiddle.net/erlingormar/bk6m4w5d/#base

Answer 3

也许这样：http://jsfiddle.net/urryfof5/7/

基本上你从身体调用last-child表并添加＆gt;所以它不会影响里面的嵌套表：

body > table:last-child (and follow it with your css)

仅影响父母

3 个答案: