时间戳

首页 > 解决方案 > 如何处理表中除表头之外的所有行？

html - 如何处理表中除表头之外的所有行？

问题描述

我有一张这样的桌子：

<table class="revista">
  <thead>
    <tr>
      <td><a href="http://example.com">MY LINK</a></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SUMMER 2020</td>
    </tr>
  </tbody>
</table>

我想独立地设置标题和第一行的样式，所以我有这个：

.revista thead {
    font-size: 2.0em;
}

.revista tr:not(thead) td {
    font-size: 1.2em;
}

对于我尝试过的第二个：

.revista tr:not(first-child) td {
    font-size: 1.2em;
}

和

.revista tr:not(nth-child(1)) td {
    font-size: 1.2em;
}

没有工作，我的意思是第二个也改变了第一个。

标签： htmlcss

解决方案

您已经拥有thead和tbody作为单独的引用，因此不需要特殊表达式。我不确定您到底想要实现什么，但这应该为您提供您正在寻找的所有选项。

/* The header */
.revista thead {
    font-size: 2.0em;
    color: red;
}

/* The first row */
.revista tbody tr:first-child {
    font-size: 2.0em;
    color: green;
}

/* All (other) rows */
.revista tbody tr {
    font-size: 1.2em;
    color: blue;
}
<table class="revista">
  <thead>
    <tr>
      <td>MY LINK</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SUMMER 2020</td>
    </tr>
    <tr>
      <td>SUMMER 2021</td>
    </tr>
    <tr>
      <td>SUMMER 2022</td>
    </tr>
  </tbody>
</table>

推荐阅读