首页 > 代码库 > H5 18-序选择器
H5 18-序选择器
18-序选择器
<style>.para:only-of-type { color: red }</style>
我是段落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>
H5 18-序选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。