[分享]css3找前几个子集

CSS3是CSS的最新版本，在其之前的版本中，只能选择元素本身或其祖先元素作为选择器，选择元素的子元素需要使用JavaScript或其他编程语言来处理，而CSS3则提供了一些新的选择器，使得更方便地选...

CSS3是CSS的最新版本，在其之前的版本中，只能选择元素本身或其祖先元素作为选择器，选择元素的子元素需要使用JavaScript或其他编程语言来处理，而CSS3则提供了一些新的选择器，使得更方便地选取元素的子集。

// :first-child 选择器
p:first-child {
  color: red;
}

// :last-child 选择器
p:last-child {
  color: blue;
}

// :nth-child(n) 选择器
p:nth-child(odd) {
  background-color: gray;
}
p:nth-child(even) {
  background-color: lightgray;
}

// :nth-last-child(n) 选择器
p:nth-last-child(1) {
  font-weight: bold;
}

// :only-child 选择器
span:only-child {
  font-style: italic;
} 

:first-child选择器会选取每个父元素下的第一个子元素，即使该子元素不是p元素。:last-child选择器会选取每个父元素下的最后一个子元素，同样也不限定为p元素。

:nth-child和:nth-last-child选择器可以根据元素在其父元素内排列的位置来选择子元素。可以使用关键字even和odd来选择偶数和奇数位置的子元素，也可以指定一个具体的位置，如:nth-child(2n+1)，表示选取第1、3、5等奇数位置的子元素。

:only-child选择器只会选取父元素下仅有一个子元素的子元素，如果父元素有多个子元素，则不会被选中。