如何将伪类nt子类用于列颜色

Question

对于一个学校项目，我需要创建一个网站。我有一个包含数据的表，它有5列20行。我需要使用伪类第n个子类为所有偶数水平线#CFF和所有奇数水平线#FFF着色。有人能帮我吗？我试着用了几次，但都用不了。

如果这有效，我的任务完成

.table-pricing {
float: left;
width: 70%;
border-width: 1px;
border-style: double;
border-color: #279AF1;
}
tr:nth-child(2) {
background-color: #CFF;
}

<table class="table-pricing">
<thead>
<tr>
<td><strong>Product Name</strong></td>
<th>Description</th>
<th>Price</th>
<th>Shoe Type</th>
<th>Rating</th>
</tr>
</thead>
<tr>
<td>All shoe</td>
<td>For everyone</td>
<td>150</td>
<td>Soft shoe</td>
<td>8</td>
</tr>
<tr>
<td>Yellow shoe</td>
<td>Best shoe for budget</td>
<td>49</td>
<td>hard shoe</td>
<td>7</td>
<tr>
</tr>
<td>Red shoe</td>
<td>For pros</td>
<td>169</td>
<td>hard shoe</td>
<td>8.5</td>
<tr>
</tr>
<td>Orange shoe</td>
<td>Best shoe for budget</td>
<td>79</td>
<td> exterme hard shoe</td>
<td>6</td>
<tr>
</tr>
<td>Pink shoe</td>
<td>For everyone</td>
<td>45</td>
<td>hard shoe</td>
<td>6</td>
<tr>
</tr>
<tr>
<td>Grey shoe</td>
<td>For everyone</td>
<td>139</td>
<td>soft shoe</td>
<td>9.3</td>
<tr>
</tr>
<tr>
<td>Black shoe</td>
<td>For everyone</td>
<td>45</td>
<td>very soft shoe</td>
<td>6</td>
<tr>
</tr>
<tr>
<td>Aqua shoe</td>
<td>For the family</td>
<td>75</td>
<td>very soft shoe</td>
<td>7</td>
<tr>
</tr>
<tr>
<td>Indigo shoe</td>
<td>For beginners</td>
<td>145</td>
<td>very soft shoe</td>
<td>6</td>
<tr>
</tr>
<tr>
<td>All shoe2</td>
<td>For everyone</td>
<td>69</td>
<td>Soft shoe</td>
<td>8</td>
<tr>
</tr>
<td>Green shoe</td>
<td>Best shoe for budget</td>
<td>49</td>
<td>hard shoe</td>
<td>9</td>
<tr>
</tr>
<td>Fire shoe</td>
<td>For pros</td>
<td>67</td>
<td>hard shoe</td>
<td>8.5</td>
<tr>
</tr>
<td>Brown shoe</td>
<td>Best shoe for budget</td>
<td>34</td>
<td> exterme hard shoe</td>
<td>6</td>
<tr>
</tr>
<td>Pro shoe</td>
<td>For everyone</td>
<td>98</td>
<td>hard shoe</td>
<td>5</td>
</tr>
<tr>
<td>Ultra shoe</td>
<td>For everyone</td>
<td>234</td>
<td>soft shoe</td>
<td>9.3</td>
</tr>
<tr>
<td>Nike shoe</td>
<td>For everyone</td>
<td>54</td>
<td>very soft shoe</td>
<td>8</td>
</tr>
<tr>
<td>Adidas shoe</td>
<td>For the family</td>
<td>78</td>
<td>very soft shoe</td>
<td>4</td>
</tr>
<tr>
<td>Puma shoe</td>
<td>For beginners</td>
<td>98</td>
<td>very soft shoe</td>
<td>6</td>
</tr>
</table>

Answer 1

使用tr:nth-child(2n)选择每第二行

tr:nth-child(2n) {
background-color: #cff;
}

<table>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Your</td>
</tr>
<tr>
<td>Boat</td>
</tr>
</table>

Answer 2

我希望这能帮助你尝试一下：

tr:nth-child(2n) {
background-color: #cff;
}