html - 如何在 CSS 中为表格的整个第一行设置样式

Question

我想知道是否有办法设置表格的整个第一行的样式（背景、文本、悬停效果）？我已经尝试了很多，但没有任何效果。我也试过这个：

.category_table td{
background: #000;
color: #fff;
font-weight: bold;}

但没有任何效果。有人可以帮我解决这个问题吗？

score 0 · Accepted Answer

你自己说的，第一行，所以这就是你需要的目标。

.category_table tbody tr:first-child td { /* styles for first row's cells */ }

（我假设您的表格有一个tbody; 如果没有，请删除选择器的这一部分。）

score 0 · Accepted Answer

您可能必须这样做：

HTML：

<table><tr class="row1">

<td>Something</td>

<td>Somthing</td>

</tr><tr>

<td>Something</td>

<td>Somthing</td>

</tr></table>

CSS：

.row { /*Style the  1st row*/

}
.row td { /*style each <td> in the 1st row*/

}

score 0 · Accepted Answer

如果您想要最佳的浏览器兼容性，请在该行中添加一个类。如果您只关心较新的浏览器，那么您可以使用 tr:first-child 选择器

在上面的链接中，您会注意到在现代浏览器中都应用了两种样式。如果您在旧浏览器（例如 IE6）中查看，则只有颜色样式会生效，字体大小选择器不会作为不受支持的选择器。如果您只想定位新浏览器，那么第一个孩子不需要对您的 HTML 进行任何更改，这可能是也可能不是问题

score 0 · Accepted Answer

在一般情况下，您需要选择表的第一个thead或tbody孩子的第一个孩子：

thead:first-of-type > :first-child,
tbody:first-of-type > :first-child {
  font-weight: bold; /* or whatever you want to set */
}

更简单的选择器适用于元素仅包含一个子元素tr:first-child的简单情况（当您只在其中编写元素时就是这种情况-然后隐含单个元素）。但一般来说，一个表可能包含一个元素、一个元素和几个元素。tabletbodytrtbodytheadtfoottbody

注意：如果没有thead元素并且在tfoot元素之前的标记中有一个元素，那么元素中的tbody第一个是否是第一行是有争议的。在标记中它是，但它最后呈现（在默认呈现中）。我已经解释了在这个问题中要忽略的元素。trtfoottfoot

对这里使用的 CSS 选择器的支持很好，但不是通用的。为了支持所有支持 CSS 的浏览器，class请向第一个tr元素添加一个属性，例如<tr class=first>，并使用类选择器，例如.first.

4 回答 4