css序选择器

来源：互联网发布：网络兼职有哪些可信编辑：程序博客网时间：2024/06/07 01:13

一，序选择器1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>18-css序选择器.html</title>    <!--    序选择器:    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 选中父元素中子元素的类型只有一种的元素    -->    <style>        /*p:first-child{*/            /*color: red;*/        /*}*/        /*        p:first-of-type{            color: red;        }*/        /*p:last-child{            color: greenyellow;        }*/        /*p:last-of-type{            color: green;        }*/        /*p:nth-child(3){            color: red;        }*/        /*p:nth-of-type(3){            color: burlywood;        }*/        /*p:nth-last-child(2){            color: purple;        }*/        /*p:nth-last-of-type(2){            color: yellow;        }*/        /*p:only-child{            color: purple;        }*/        p:only-of-type{            color: red;        }    </style></head><body><!--<div>    <p>我是段落5</p>    <p>我是段落6</p>    <p>我是段落7</p>    <p>我是段落8</p>    <p>我是段落9</p></div>--><p>我是段落1</p><div>    <h1>我是标题</h1>    <p>我是段落</p>    <p>我是段落2</p></div></body></html>

二，序选择器2

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>18-序选择器下.html</title>    <!--        :nth-child(odd) 选中同级别中所有的奇数        :nth-child(even) 选中同级别中所有的偶数        :nth-of-type(odd) 选中同类型同级别中所有的奇数        :nth-of-type(even) 选中同类型同级别中所有的偶数        :nth-child(xn + y) 选中同级别中所有的 xn + y        :nth-of-type(xn + y) 选中同类型同级别中所有的 xn + y         n: 代表的是同级别中所有的元素,计数器,n是从0开始递增的         x: 代表选中同级别中n的倍数         y: 代表选中同级别中的元素是从第几个开始的    -->    <style>        /*P:nth-child(odd){            color: red;        }*/        /*p:nth-child(even){            color: yellow;        }*/        /*p:nth-of-type(odd){            color: blue;        }*/        /*p:nth-of-type(even){            color: green;        }*/        /*p:nth-child(3n + 1){            color: red;        }*/        p:nth-of-type(3n + 1){            color: green;        }    </style></head><body><p>我是项目</p><p>我是项目</p><h1>我是标题</h1><p>我是项目</p><p>我是项目</p><h1>我是标题</h1><p>我是项目</p><p>我是项目</p><div>    <p>我是段落</p>    <p>我是段落2</p>    <p>我是段落3</p></div><h1>我是标题</h1><p>我是项目</p><p>我是项目</p></body></html>

0 0