我想要一个不同的颜色只为一个html表的第一行

Question

我用的是桌子。我应用了CSS table-4。

下面是html代码：

<table border='0' width='100%' id='table-4'>
   <tr><td>Date</td><td>Headline</td></tr>
   <tr><td>29 DEC</td><td>Dead</td></tr>
   <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
</table>

下面是style.css：

#table-4 { background-color: #F2F2F2;}

因此，整个表格的背景颜色是#F2F2F2，但是我希望Date和Headline所在的第一行使用不同的颜色，那么我该如何修改我的CSS呢？

Answer 1

为此，您可以使用:first-child。像这样写：

#table-4 tr:first-child{
    background:red;
}

检查此http://jsfiddle.net/cbK8J/

Answer 2

@JonathandeM.'s comment是正确的。将<thead>和<tbody>标记放入其中，并将<thead>行中的<td>标记更改为<th>标记(因为HTML会说明事物是什么，它们就是标题)：

<table border='0' width='100%' id='table-4'>
   <thead>
      <tr><th scope="col">Date</th><th scope="col">Headline</th></tr>
   </thead>
   <tbody>
      <tr><td>29 DEC</td><td>Dead</td></tr>
      <tr><td>30 DEC</td><td>Hit</td></tr>
      <tr><td>02 JAN</td><td>Leg</td></tr>
   </tbody>
</table>

然后，使标题行具有不同背景颜色的CSS为：

#table-4 thead tr {
   background-color: green;
}

Answer 3

您可以这样做：

HTML：

<td class="whatever">Date</td><td class="whatever">Headline</td>

css：

.whatever { color: #a9a9a9 }

<tr>负责行，<td>负责单元格。