18-序选择器
我是段落1
我是段落2
我是段落2
我是标题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>18-序选择器</title> <style> /* p:first-child{ color: red; } */ /* p:first-of-type{ color: blue; } */ /* p:last-child{ color: red; } */ /* p:last-of-type{ color: blue; } */ /* p:nth-child(3){ color: red; } */ /* p:nth-of-type(3){ color: blue; } */ /* p:nth-last-child(2){ color: red; } */ /* p:nth-last-of-type(2){ color: red; } */ /* p:only-child{ color: purple; } */ /* p:only-of-type { color: red; } */ .para:only-of-type { color: red; } </style> </head> <body> <!-- CSS3中新增的选择器最具代表性的就是序选择器 1.同级别的第几个 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素中唯一的标签 注意点: 不区分类型 2.同类型的第几个 :first-of-type 选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :only-of-type 选中父元素中唯一类型的某个标签 --> <!-- <h1>我是标题</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <div> <p>我是段落5</p> <p>我是段落6</p> <p>我是段落7</p> <p>我是段落8</p> </div> --> <p class="para">我是段落1</p> <div> <p class="para">我是段落2</p> <p class="para">我是段落2</p> <h1>我是标题</h1> </div> </body> </html>