Question

<!DOCTYPE html>
<html>
<head>
<style>

table{
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

table.reference:nth-child(1) th:nth-child(1)    {background-color:green;}
table.reference tr:nth-child(odd)	{background-color:red;}
table.reference tr:nth-child(even)	{background-color:blue;}


}


</style>
</head>
<body>

<table class="reference">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr >
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

我想为我的第一行单独使用不同的颜色，然后是后续行的替代颜色，但我不知道如何单独选择我的第一行并给它一个不同的颜色。我可以通过为每个表行提供不同的类名来实现它，但我想探索如何降低代码复杂性，你能帮我解决一下吗？

Answer 1

如果只有一行TH，请使用：

.reference th {background: green;}

如果您想要对第一行设置不同的样式（如果有TH或TD则不重要），请使用:first-child

.reference tr:first-child {background: green;}

或

.reference tr:first-child th {background: green;}

如何使用css选择器选择表中第一行的表标题？

1 个答案: