CSS学习归纳6

作者：System 时间：2024年08月08日分类：所有,css 字数：624

在CSS中，可以使用伪类:nth-child()来选择特定的元素。这个伪类可以接受一个参数，用来指定选择哪个子元素。参数可以是数字、关键词或公式。

例如，如果你想选择一个父元素下的第三个子元素，你可以这样写：




.parent :nth-child(3) {
  /* 样式规则 */
}

如果你想选择所有奇数位置的子元素，你可以使用n和2n公式：




.parent :nth-child(2n) {
  /* 样式规则，适用于偶数位置的子元素 */
}
 
.parent :nth-child(2n+1) {
  /* 样式规则，适用于奇数位置的子元素 */
}

如果你想选择第一个子元素和第三个子元素，你可以使用逗号分隔多个选择器：




.parent :nth-child(1),
.parent :nth-child(3) {
  /* 样式规则，适用于第一个和第三个子元素 */
}

如果你想选择所有子元素，但是排除第一个和最后一个，你可以使用not()伪类：




.parent :not(:first-child):not(:last-child) {
  /* 样式规则，排除第一个和最后一个子元素 */
}

以上是:nth-child选择器的一些基本用法。