<!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>我想单独为我的第一行使用不同的颜色，然后为接下来的行使用其他颜色，但我不知道如何只选择我的第一行并给它不同的颜色。我可以通过为每个表行提供不同的类名来做到这一点，但我想探索如何降低代码复杂性，你能帮帮我吗？
最佳答案
如果只有一行包含 TH，请使用:
.reference th {background: green;}
如果你想在第一行设置不同的样式(不管是 TH 还是 TD)，使用 :first-child
.reference tr:first-child {background: green;}
或
.reference tr:first-child th {background: green;}
关于html - 如何使用 css 选择器选择表格中第一行的表格标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29328240/