代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
/* 5行 6 列 */
/* 60 * 60 */
/* 80 * 80 */
/* 100 * 100 */
table {
width: 480px;
height: 400px;
border: 1px solid #000;
border-collapse: collapse;
}
table tr td {
width: 80px;
height: 80px;
border: 1px solid #000;
}
/* 选择奇数的行和奇数的列 */
table tr:nth-child(2n-1) td:nth-child(2n-1) {
background-color: green;
}
/* 选择奇数的行和偶数的列 */
table tr:nth-child(2n-1) td:nth-child(2n) {
background-color: red;
}
/* 选择偶数的行和偶数的列 */
table tr:nth-child(2n) td:nth-child(2n) {
background-color: green;
}
/* 选择偶数的行和奇数的列 */
table tr:nth-child(2n) td:nth-child(2n-1) {
background-color: red;
}
</style>
</head>
<body>
<!-- tr*5>td*6 -->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果:
PS:仅供学习使用。