CSS 选择除每个表格的第一行以外的所有 HTML 元素

Question

当你有一个随机的 HTML 页面时。 我真的不关心内容或结构是什么

我想要的是选择页面上存在的每个表的第一行 (TR) 以外的所有元素。

以下选择器不起作用：

* :not(tr:first-child){ /* DO SOMETHING */}

呈现的表格只是一个普通表格，没有任何表格标题，例如：

<p>123</p>
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
</table>
<div>bla bla</div>

Answer 1

您可能想要对表格内容进行样式化，而不是“标题”。

一个简单的方法是使用tds 作为内容，ths 作为标题，因为th 用于定义 HTML 表格中的标题单元格。 （你甚至可以记住它说 th = table header。）

然后，您只需定位tds：

table {
  border-collapse: collapse;
}

/* Add your style here */
td {
  border: 1px solid gray;
  padding: 8px 20px;
  background: #ddd;
}

<p>123</p>
<table>
  <tr>
    <th>1</th><th>2</th><th>3</th><!-- Note the ths here! -->
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
  <tr>
    <td>d</td><td>f</td><td>g</td>
  </tr>
</table>
<div>bla bla</div>

---

⋅ ⋅ ⋅

如果你不能使用ths…
由于您可能已经在 tds 上应用了一些样式，因此最好使用这种选择器来匹配 tds 中的 tds，除了第一个：

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 8px 20px;
}

/* Stylize all tds in trs except in the first one! */
table tr:not(:first-child) td {
  background: #ddd;
}

<p>123</p>
<table><!-- All the elements are tds in the trs! -->
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
  <tr>
    <td>d</td><td>f</td><td>g</td>
  </tr>
</table>
<div>bla bla</div>

希望对你有帮助。

Answer 2

这个解决方法怎么样：

* {
  color: green;
}
table tr:first-of-type td {
  color: red;
}

<p>test</p>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
<p>test</p>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>