web前端之css选择第一个或最后一个元素、排除第一或最后一个标签、选择偶数或奇数标签、等差数列标签的选择、选择最后n个标签、第n个标签、child、first、last、nth

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

在CSS中，我们可以使用伪类选择器来选择第一个、最后一个、奇数或偶数元素。




p:first-child {
  color: red;
}




p:last-child {
  color: red;
}




p:nth-child(odd) {
  color: red;
}




p:nth-child(even) {
  color: red;
}

注意：这些选择器仅在元素是其父元素的直接子元素时有效。如果元素之间有其他元素（例如，有一个div包含所有p元素），你需要使用:nth-of-type选择器来代替:nth-child。

例如，选择第一个和最后一个元素：




div p:first-of-type {
  color: red;
}
 
div p:last-of-type {
  color: red;
}

选择奇数和偶数元素：




div p:nth-of-type(odd) {
  color: red;
}
 
div p:nth-of-type(even) {
  color: red;
}

以上代码将选择div下的第一个p、最后一个p，以及所有奇数或偶数的p元素，并将它们的颜色设置为红色。