第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>

Answer 2

您将无法使用单个:nth-child()执行此操作 - 您需要链接至少一个其他此类伪类。例如，:nth-child()和:nth-last-child()的组合（n+2位表示分别从第二个孩子开始向前和向后计数）：

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

或者，不要使用公式，只需排除:first-child和:last-child：

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}

Answer 3

如果要选择元素2到4，请按以下步骤操作：

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

提醒选择器链序列应从最大到最小。 Safari有一个错误使该技术无法正常工作。