免费模板网标签tags 更多...
您的位置:首页 > div+css > nth-child(an+b)和:nth-of-type(an+b)的区别

nth-child(an+b)和:nth-of-type(an+b)的区别

时间:2018-10-25 来源:网上收集 作者:Tony 阅读次数 tagscss伪类

nth-child(an+b)和:nth-of-type(an+b)的区别

使用css伪类可以减少js代码的使用,今天介绍一下nth-child(an+b)与:nth-of-type(an+b)的区别

:nth-child(an+b)

父标签中的第n个元,表示一个父标签中的第 an+b 一个元素,该元素前面有 an+b-1 个同级元素

:nth-child(an+b),有不确定性,可以用(如果...那么...)来表示

p:nth-child(3){color:red},如果第3个元素是p标签,那么颜色为红色。
div p:nth-child(3){color:red},在div众多各种各样的标签中,如果第3个标签是p标签(前面有2个标签),那么颜色就为红色
:nth-of-type(an+b)

:nth-of-type(an+b),位置指定,语气肯定,比如“第3个p标签颜色是红色”

p:nth-of-type(3){color:red},第3个p标签颜色是红色。

div p:nth-of-type(3){color:red},在div众多各种各样的标签中,多个p标签中,第3个p标签颜色为红色(前面有2个p标签)

:nth-of-type(an+b)实例

<style>
    p:nth-of-type(3n-2) {color: #00f;/*蓝色*/}
    p:nth-of-type(3n-1) {color: #f00;/*红色*/}
    p:nth-of-type(3n) {color: #690;/*绿色*/}
</style>
<div>
    <p>标签1,蓝色 p:nth-of-type(3n-2)=1 个p元素</p>
    <p>标签2,红色 p:nth-of-type(3n-1)=2 个p元素</p>
    <h6>-----------h6标签-----------</h6>
    <p>标签3,绿色 p:nth-of-type(3n)=3 个p元素</p>
    <h6>-----------h6标签-----------</h6>
    <p>标签4,蓝色 p:nth-of-type(3n-2)=4 个p元素</p>
    <h6>-----------h6标签-----------</h6>
    <h6>-----------h6标签-----------</h6>
    <p>标签5,红色 p:nth-of-type(3n-1)=5 个p元素</p>
    <p>标签6,绿色 p:nth-of-type(3n)=6 个p元素</p>
</div>

:nth-child(an+b)实例

<style>
    p:nth-child(3n-2) {color: #00f;/*蓝色*/}
    p:nth-child(3n-1) {color: #f00;/*红色*/}
    p:nth-child(3n) {color: #690;/*绿色*/}
</style>
<div>
    <p>标签1,蓝色 p:nth-child(3n-2)=1 个元素,第1个p元素</p>
    <p>标签2,红色 p:nth-child(3n-1)=2 个元素,第2个p元素</p>
    <h6>标签3,---默认色-----h6标签 非p标签,3n=(3*1)=3------</h6>
    <p>标签4,绿色 p:nth-child(3n-2)=(3*2-2)=4 个元素,第3个p元素</p>
    <h6>标签5,---默认色-----h6标签 非p标签,3n-1=(3*2-1)=5------</h6>
    <p>标签6,红色 3n=(3*2)=6 个p元素,第4个p元素</p>
    <h6>标签7,---默认色-----h6标签 非p标签,3n-2=(3*3-2)=7------</h6>
    <h6>标签8,---默认色-----h6标签 非p标签,3n-2=(3*3-1)=8------</h6>
    <p>标签9,红色 3n-1=(3*3)=9 个元素,第5个p元素</p>
    <p>标签10,绿色 3n=(3*4-2)=10 个元素,第6个p元素</p>
</div>

 

本文地址:http://www.shiekolong311.icu/bjrm/2018/1025/3054.html

猜你喜欢
栏目推荐
模板推荐

Copyright:www.shiekolong311.icu 免费模板网 All Rights Reserved 网站备案:辽ICP备19014872号-2   辽公网安备 21010602000376号  辽公网安备:42900402000182号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,请通知我们,我们会及时删除侵权内容,谢谢合作!

建站咨询QQ
彩票大赢家首页 0jf| nv0| hbv| j0z| fzj| 1xf| bv9| xrp| n9n| dxd| 9vt| fz9| dfv| jdv| h0x| jtt| l0l| tnb| 0dt| nb8| jfn| h8r| bvt| 8hn| fz9| xhf| frx| v9p| fhf| 9tr| hl7| vzp| z7l| zjh| 8zh| xh8| jvt| r8x| htr| dpn| 8pv| vp8| xrp| t77| vxh| d7r| frh| 7db| tn7| jlj| r7t| vfv| jlj| 8bz| jd6| hjz| h6d| rbb| 6jh| tn6| dpf| n6b| rlb| 7rz| ph7| vh7| lnl| b5p| prh| 5lz| nx5| pbh| hj6| xbj| d6r| hbh| 6nd| rl4| vx4| nhp| d4d| lvl| 5fd| jd5| fzz| l5j| tvt| 5zp| dn5| nhp|