第 n 个范围的 CSS 选择器? [英] CSS Selector for nth range?

问题描述

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

How can I adapt the CSS selector below:

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

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

so it applies to td columns 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>

推荐答案

你不能用一个单一的 :nth-child() 来做到这一点——你需要在至少还有一个这样的伪类.例如，:nth-child() 和 :nth-last-child() 的组合(n+2 位表示开始从第二个孩子开始分别向前和向后计数):

You won't be able to do this with a single :nth-child() — you'll need to chain at least one other such pseudo-class. For example, a combination of :nth-child() and :nth-last-child() (the n+2 bit means start counting forward and backward respectively from the 2nd child):

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

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

Alternatively, instead of making use of a formula, simply exclude :first-child and :last-child:

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

这篇关于第 n 个范围的 CSS 选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！