第 n 个范围的 CSS 选择器？

Question

如何调整下面的 CSS 选择器:

.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}

所以它适用于 td 列 2~4?

<table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table>

Answer 1

您可以使用的另一种方法是:

.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}

这更清楚一些，因为它包含了您范围内的数字(2 和 4)，而不必从末尾倒数。

它也更加健壮，因为您不必考虑元素的总数。

为了澄清:

:nth-child(n+X)     /* all children from the Xth position onward */
:nth-child(-n+x)    /* all children up to the Xth position       */

示例:

#nn div {
    width: 40px;
    height: 40px;
    background-color: black;
    display: inline-block;
    margin-right: 10px;
}

#nn div:nth-child(n+3):nth-child(-n+6) {
    background-color: blue;
}

<div id="nn">
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>