css nth

作者：冷轩长风发布日期:2025-10-23 浏览:67

/* 示例代码：使用 :nth-child 选择器 */

/* 选择每个 <ul> 元素中的第二个 <li> 元素，并将其背景色设置为灰色 */
ul li:nth-child(2) {
  background-color: gray;
}

/* 选择每个 <ul> 元素中的奇数 <li> 元素，并将其文本颜色设置为红色 */
ul li:nth-child(odd) {
  color: red;
}

/* 选择每个 <ul> 元素中的偶数 <li> 元素，并将其文本颜色设置为蓝色 */
ul li:nth-child(even) {
  color: blue;
}

/* 使用公式 (an+b) 选择元素，例如每隔 3 个元素选择一次 */
ul li:nth-child(3n+1) {
  font-weight: bold;
}

解释说明：

:nth-child(n) 是 CSS 中的一个伪类选择器，用于选择父元素中的第 n 个子元素。
ul li:nth-child(2) 会选择每个 <ul> 元素中的第二个 <li> 元素。
ul li:nth-child(odd) 和 ul li:nth-child(even) 分别选择奇数和偶数位置的 <li> 元素。
ul li:nth-child(3n+1) 使用公式 (an+b) 来选择元素，这里表示每隔 3 个元素选择一次，从第 1 个开始。

上一篇：css 线性渐变

下一篇：css display grid