如何使用 CSS 选择器定位特定范围的第 n 个子元素？

第 n 个元素组的 CSS 选择器

给定的 CSS 选择器 `.myTableRow td:nth-child(?){
背景颜色：#FFFFCC;
}，允许您为第 n 个子元素定位并设置特定样式

.myTableRow 元素内的元素。但是，您需要将其修改为目标 ` 列从 2 到 4。

解决方案：

要实现此目的，您可以使用以下 CSS选择器：

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

此选择器使用 :nth-child() 选择器，语法如下：

• :nth-child(n X)：选择以下所有子元素第 X 个位置开始。
• :nth-child(-n x)：选择第 X 个位置之前的所有子元素。

通过组合这两个选择器，您可以定位其中的元素特定范围。

示例：

在提供的 HTML 结构中：

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

应用修改后的 CSS 选择器 `.myTableRow td： nth-child(n 2):nth-child(-n 4){
背景颜色:#FFFFCC;
}，将设置

`第2、3和4列的背景颜色到#FFFFCC。

以上是如何使用 CSS 选择器定位特定范围的第 n 个子元素？的详细内容。更多信息请关注PHP中文网其他相关文章！