html - 如何将样式仅应用于表中的第一个 ，而不考虑 元素？

Question

我有一个包含多个 tbody 元素的表格——一些由浏览器创建，一些是我出于编程原因自己编写的。我只想将样式应用到我的表中的第一个 tr，我通常会为它使用 table > tr。但是，我的样式不能假定 tbody 元素存在或不存在，因为我不知道每个用户的浏览器在每种情况下都会自动添加 tbody 元素。

如您所见，该表的第二个 tbody 中的第一个 tr 应用了不需要的边框样式。我怎样才能让它只应用于我表中的 first tr 而不管 tbody 标签的存在？

JSFiddle demo

CSS

.my-table {
    border-collapse: collapse;
}
    .my-table td,
    .my-table th {
        text-align: left;
        padding: 6px 8px;
        align-content: center;
        box-sizing: border-box;
    } 
    .my-table td[colspan="42"] {
      text-align: center;
      background-color: lightgray;
    }
    .my-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        background-color: #0e3e64;
        color: white;
        text-align: center;
    }
    .my-table tr:not(:first-child) {
        border: 1px solid #efefef;
    }

    /*here's the styling I don't want applied to that third tr in my table*/
    .my-table tr:first-child {
        border: 1px solid #0e3e64;
    }

HTML

<table class="my-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="42">Section 1</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tbody>
    <tr>
      <td colspan="42">Section 2</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>      
  </tbody>
</table>

Answer 1

不幸的是，在您的情况下，CSS 不提供“页面上的第一次出现”，也没有提供忽略直接父级的“父级中的第一次出现”选择器。由于 CSS 代表级联样式表，它并不完全符合语言的固有功能 - 默认行为直接与父元素相关，而不是与整个页面相关。

如果你的 table 总是有一个 tbody ，您可以执行以下操作:

.my-table tbody:first-of-type tr:first-child { ... }

不过，如果您真的想选择 第一次 出现的 <tr>在 .my-table 内，您需要一个 JavaScript 解决方案。为此，我建议使用 jQuery，因为它使 DOM/元素操作变得更加简单:

$(".my-table tr").first().css("border", "1px solid #0e3e64");

编辑:作为torazaburo在评论中提到，这个答案的第二部分并不是完全必要的。不管有没有tbody被声明，浏览器会自动插入一个到所有<table>元素。因此，在所有情况下，选择“first row of first tbody”应该是一个充分的解决方案。