css - 仅影响 parent

Question

让我们开门见山，我创建这个例子是为了更好地表达我的观点:

Demo Here

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;
}

所以我们有 2 个表，都具有相同的类。 表 1 中有一个表，而 表 2 没有。

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

是否可以只影响从父表到子表的样式中的父表？

注意:只能更改 CSS，不能更改 HTML。可以使用CSS3!

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

Answer 1

选择第一级 child 并应用它。

   .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