CSS3结构伪类选择器:
1、E:nth-child(n)实现奇偶:
(li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
)
2、E:nth-last-child(n) { sRules }
(匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。)
3*、E:nth-of-type(n) { sRules }
(匹配同类型中的第n个同级兄弟元素E。 )
4、E:first-child { sRules }
(匹配父元素的第一个子元素E。 )
5、E:last-child { sRules }
1、E:nth-child(n)实现奇偶:
(li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
)
2、E:nth-last-child(n) { sRules }
(匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。)
3*、E:nth-of-type(n) { sRules }
(匹配同类型中的第n个同级兄弟元素E。 )
4、E:first-child { sRules }
(匹配父元素的第一个子元素E。 )
5、E:last-child { sRules }
(匹配父元素的最后一个子元素E。 )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> li:nth-child(2n-1){ color: red; } li:nth-last-child(2){/*反向,倒数第二条*/ color: yellow; } p:nth-of-type(2){ color: red; } </style> <title>结构伪类选择器</title> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> <li>列表项6</li> <li>列表项7</li> <li>列表项8</li> </ul> <div> <p>段落1</p> <div>伪段落</div> <p>段落2</p> <p>段落3</p> <p>段落4</p> </div> </body> </html>