如何使用 CSS nth-child 选择一系列元素？-css教程-PHP中文网

如何使用 CSS nth-child 选择一系列元素？

Barbara Streisand

发布： 2024-10-26 05:25:30

原创

231 人浏览过

How to Select a Range of Elements with CSS nth-child?

增强第 n 个范围的 CSS 选择器

CSS 中的第 n 个子选择器允许根据元素在父元素中的位置精确选择元素。但是，将此选择器应用于未由特定数字定义的范围可能具有挑战性。

扩展第 n 个子级范围选择

考虑以下 CSS 选择器：

<code class="css">.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}</code>

登录后复制

此选择器旨在将背景颜色应用于

范围内中的元素与类“myTableRow”。但是，问号 (?) 占位符使范围未定义。

将此选择器应用于

;第 2 至 4 列，您可以使用以下 CSS：

<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}</code>

登录后复制

了解增强型选择器

此选择器使用两个附加的第 n 个子选择器：

:nth-child(n 2)：选择从第 2 个位置开始的所有子级。
:nth-child(-n 4)：选择直到第 4 个位置的所有子级。

通过组合这两个子选择器，我们有效地创建了一个包含第二到第四位置元素的范围。

用法示例

考虑以下 HTML 表格：

<code class="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></code>

登录后复制

将增强型 CSS 选择器应用于此表格将导致背景颜色应用于第二个、第三个和第四个

表格。 “myTableRow” 中的元素。这是因为这些元素在 2 到 4 的定义范围内。

以上是如何使用 CSS nth-child 选择一系列元素？的详细内容。更多信息请关注PHP中文网其他相关文章！