html - 如何定位包含的？ (不包含 )？

Question

我如何选择所有 <tr>其中包含 <th>但不是 <td>与 CSS。这可能吗？

上下文是我用 CSS 实现了斑马条纹背景，但我不想将其应用于标题行。这也让我想知道这种选择通常是否可以使用 CSS(无需添加自定义类)。

使用 vanilla HTML 和 CSS 的解决方案将是理想的。

下表代码:

<table>
  <tr>
    <th>This is header</th>
  </tr>
  <tr>
    <td> Data 1</td>
    <td> $125.00 </td>
  </tr>
  <tr>
    <td> Data 2 </td>
    <td> $175.00 </td>
  </tr>
    <th>This is another header</th>
  </tr>
  <tr>
    <td> Data 3</td>
    <td> $100.00 </td>
  </tr>
  <tr>
    <td> Data 4 </td>
    <td> $200.00 </td>
  </tr>
</table>

下面斑马条纹的 CSS:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Answer 1

我会说:只需为只包含 的 添加一个类名即可

例如:

HTML

<table>
  <tr class = "headrow">
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr class = "row">
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

CSS

.headrow
{
   /* styling for row with <th> */
}
.row
{
   /* styling for row with <td> */
}

或

如果您知道带有 的 永远是表格中的第一个，您可以这样做:

HTML

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

CSS

table tr
{
   /* styling for all <tr> */
}
.table tr:first-of-type
{
   /* styling for row with <th> */
}