0420-序选择器

来源：互联网发布：玲珑加速器mac版编辑：程序博客网时间：2024/05/17 07:56

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 选中父元素中唯一类型的某个标签

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>序选择器</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><p class="para">我是段落1</p><div>    <p class="para">我是段落2</p>    <p class="para">我是段落2</p>    <h1>我是标题</h1></div></body></html>

0 0