CSS：好玩的‘伪类’系列之——(:nth‐child()、:first‐child和:last‐child)

本文链接：https://blog.youkuaiyun.com/gavincz/article/details/89703693

本文详细介绍了CSS中的:nth-child(), :first-child, :last-child选择器的使用方法，包括它们的定义、触发条件及兼容性，并通过实例展示了如何利用这些选择器修改一组兄弟元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:nth‐child()

定义：匹配当前元素及与之相同的所有兄弟元素，修改其样式

触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式

兼容：IE8及8以下不支持 Opera9.5以下不支持

:first‐child

定义：匹配在一组兄弟元素中的第一个元素，修改其样式

触发条件：当所匹配元素为一组兄弟元素中的第一个元素时，修改其样式，相当于:nth-child(1)

兼容：IE7以下不支持 Opera9.5以下不支持

:last‐child

定义：匹配在一组兄弟元素中的最后一个元素，修改其样式

触发条件：当所匹配元素为一组兄弟元素中的最后一个元素时，修改其样式

兼容：IE8及8以下不支持 Opera9.5以下不支持

举个栗子

html代码：

  <header>
    <ul>
      <li>首页</li>
      <li>博客</li>
      <li>书声</li>
      <li>分享</li>
      <li>留言</li>
    </ul>
  </header>

css代码：

header{
  width: 38%;
  height: 50px;
  margin: 0 auto;

}
ul{
  width: 100%;
  background-color: #33CCFF; 
  padding: 0 30px;
  box-sizing: border-box;
}
li{
  cursor: pointer;
  display: inline-block;
  width: 80px;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  border-right: 1px solid #000;
}
li:nth-child(1){
  border-left: 1px solid #000;
}
li:nth-child(2n){
  color: #00FF33;
}
li:first-child:hover{
  color: #990099;
  font-weight: 900;
}
li:last-child:hover{
  color: #990099;
  font-weight: 900;
}
li:nth-child(3):active{
  color: #990099;
  font-weight: 900;
}

效果图：