CSS:nth-child选择器如何使用_规律性子元素样式应用

:nth-child 选择器通过公式 an+b 精准定位子元素，如 even/odd 实现隔行变色，tr:nth-child(even) 设偶数行背景，.grid-item:nth-child(3n+1) 控制网格首列边距，结合 :not() 排除特定元素，提升样式规律性与维护性。

:nth-child 是 CSS 中一个非常实用的选择器，用于选中父元素下的第 n 个子元素。它特别适合为具有规律性排列的子元素设置样式，比如隔行变色、每三列一组布局等。下面详细介绍其用法和常见应用场景。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

基本语法与公式

• even / odd：可直接使用关键字，如 :nth-child(even) 选中偶数项，:nth-child(odd) 选中奇数项。
• 数字：如 :nth-child(3) 只选第 3 个子元素。
• 公式示例：
  • :nth-child(2n + 1) 表示奇数项（1, 3, 5...）
  • :nth-child(3n) 每第 3 个元素（3, 6, 9...）
  • :nth-child(4n + 1) 从第 1 个开始，每隔 4 个选一次（1, 5, 9...）

实现隔行变色

tr:nth-child(even) {
  background-color: #f2f2f2;
}

网格布局中的列样式控制

• 例如每 3 列一组，想让第一列左边距为 0：

.grid-item:nth-child(3n + 1) {
  margin-left: 0;
}

登录后复制
• 或者为每组最后一列设置右边距清零：

.grid-item:nth-child(3n) {
  margin-right: 0;
}

登录后复制

排除特定元素或重置样式

• 比如给所有 div 子元素加边框，但跳过第一个：

div:nth-child(n+2) {
  border-top: 1px solid #ccc;
}

登录后复制
• 或配合类名排除：

.item:not(.special):nth-child(odd) {
  background: yellow;
}

登录后复制

以上就是CSS:nth-child选择器如何使用_规律性子元素样式应用的详细内容，更多请关注php中文网其它相关文章！