这里使用了伪类选择器:first-child和:nth-child(2)来选择第一行的前两个单元格,仅将它们设置成灰色,您看一下是不是您要的效果。
<!DOCTYPE html>
<html>
<head>
<title>成绩表格</title>
<style>
table {
width: 600px;
height: 220px;
margin: 0 auto;
border-collapse: collapse;
}
th {
text-align: center;
}
td {
font-size: 10px;
text-align: center;
}
tr:first-child th:first-child,
tr:first-child td:first-child {
background-color: gray;
}
tr:first-child th:nth-child(2),
tr:first-child td:nth-child(2) {
background-color: gray;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
<th>平均分</th>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td>80</td>
<td>85</td>
<td>255</td>
<td>85</td>
</tr>
<tr>
<td>小红</td>
<td>85</td>
<td>90</td>
<td>95</td>
<td>270</td>
<td>90</td>
</tr>
<tr>
<td>小李</td>
<td>80</td>
<td>85</td>
<td>90</td>
<td>255</td>
<td>85</td>
</tr>
</table>
</body>
</html>