利用 nth-of-type 选择某范围内的子元素

table 表格红绿相间，显示的更加直观，也是我们常见的隔行换色，不过大多数都是使用 JS 控制，CSS 直接通过选择器控制更丝滑。

<table>  <tbody>    <tr>      <td>1</td>    </tr>    <tr>      <td>2</td>    </tr>    <tr>      <td>3</td>    </tr>    <tr>      <td>4</td>    </tr>    <tr>      <td>5</td>    </tr>    <tr>      <td>6</td>    </tr>  </tbody></table>

tbody tr:nth-of-type(2n){  background-color: red;}tbody tr:nth-of-type(2n+1){background-color: green;}

你也这样来做，选择 5-10 的子元素。

table tr:nth-child(n+5):nth-child(-n+10) {    background-color: red;}