css3中结构伪类选择器 |php include css

/* 选取第一个元素 */

:first-child是最常用的结构伪类选择器之一，可以选取指定父元素的第一个子元素。

/* 实例 */
p:first-child{
color: red;
}

/* 选取最后一个元素 */

:last-child与:first-child类似，可以选取指定父元素的最后一个子元素。

/* 实例 */
p:last-child{
color: blue;
}

/* 选取第n个元素 */

:nth-child可以选取指定父元素的第n个子元素。在n前加上正号或负号，可以指定不同的选择规则。

/* 实例 */
/* 选择第1，3，5...个p元素 */
p:nth-child(2n-1){
color: green;
}
/* 选择第偶数个p元素 */
p:nth-child(2n){
color: orange;
}

/* 选取第n个特定类型的元素 */

:nth-of-type可以选取指定父元素中特定类型的第n个子元素。

/* 实例 */
/* 选择第3个div元素 */
div:nth-of-type(3){
color: purple;
}

除了以上这些选择器，CSS3中还提供了众多的其他结构伪类选择器，例如:first-of-type，:last-of-type，:only-child等等。这些选择器大大增强了CSS的能力，使得样式定位更为灵活化。开发人员可以根据需要灵活使用，效果会更加优秀。