Question

如果我有下面的HTML，我想找到一个CSS类定义，它将影响最外面的表但不影响子表。如果不更改HTML，我可以.myClass执行此操作：

我正在玩非选择器，但无法让它发挥作用。

<!DOCTYPE html>
<html>
<style>
.myClass tr td div :not(table){
    background-color:red;
}
</style>
<body>
    <div class = "myClass">
        <table>
            <tr>
                <td>
                    <div>My</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <table>
                            <tr>
                                <td>Hello</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <table>
                            <tr>
                                <td>World</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Answer 1

您可以一起使用直接子选择器>和:first-child。请注意，虽然HTML中没有tbody，但浏览器会自动正常添加。{/ p>

.myClass > table > tbody > tr:first-child > td {
  background: red;
}

.myClass > table > tbody > tr:first-child > td {
  background: red;
}

<div class="myClass">
  <table>
    <tr>
      <td>
        <div>My</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <table>
            <tr>
              <td>Hello</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <table>
            <tr>
              <td>World</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</div>

Answer 2

第一个单元格是第一个单元格中的第一个div，我们可以使用以下方法对其进行定位：

tr:first-child div:first-child{
  background:red;
}

Answer 3

如果不改变你的HTML，你不能用纯css做到这一点。

您可以使用jQuery或简单地将“我的”放在范围内，因为选择器无法访问文本。

但公平地说，你的问题部分由@Pangloss回答。要访问外部表，只需使用>。您的问题在于，在第2行和第3行，您仍然存在外部表。你的问题实际上应该是“什么是没有特定子类型的元素的选择器”，然后你会发现你不能在css上定位元素的父元素。

防止HTML子表获得级联样式

3 个答案: