:nth-child()

语法：

1
2
3
el:nth-child(num){
  style
}

元素 el 的父元素的第 num 个 且为 el 的子元素

例子：

1
2
3
4
5
6
7
8
9
<div>
  <p>1</p>
  <div>2</div>
  <p>3</p>
</div>

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

此样式是不会生效的，因为 p 的父元素的第二个子元素是 div，不是 p，不匹配，所以不生效

num 的可选值：

  • odd 奇数行
  • even 偶数行
  • 具体数字，如1、2、3……
  • an+b n=0、1、2、3……
    • 0n+3 表示匹配第三个
    • 2n+0 表示2的倍数个，相当于 even
    • 3n+4 匹配位置为4、7、10……
    • 0n+1 同 :first-child

:first-child

语法：

1
2
3
el:first-child{
  style
}

元素 el 的所有兄弟元素中 第一个 且为 el 的元素

例子：

1
2
3
4
5
6
7
<div>0</div>
<p>1</p>
<p>2</p>

p:first-child{
  background-color: coral;
}

以上样式不会生效，因为 p 元素的所有兄弟元素里，第一个元素不是 p。如果把 div 元素去掉，则 内容为 1 的 p 元素会被设置上背景颜色