• 明堂红木栽种海南黄花梨 让员工更加珍惜红木材料 2019-07-03
  • 端午假期广州全球“吸粉”迎客578万人次 2019-06-30
  • 中国的强大不是说说而己,不要因为有俩钱就以为成了世界老大 ! 拥有保护财富和维护主权的能力,才是真正强大的标志!(原创首发) 2019-06-30
  • 20年后中国受过高等教育人口达到3.5亿,比美国总人口还多,硕士生将达到2千5百万,博士2百万。这就是20年后中国的实力,这也是人类进步,建议美国平静接受,没必 2019-06-23
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-06-23
  • 争奇斗艳 洛阳牡丹进入盛花期  600多种牡丹迎春绽放 2019-06-23
  • 一语惊坛(5月21日):不忘初心,将改革开放进行到底,中国梦一定实现! 2019-06-23
  • 【见证西安】NO.9西安首届农民节,记录西安农村新生活! 2019-05-14
  • 【中国梦·大国工匠篇】“景德镇拉坯第一人”占绍林:手艺“满意”前谢绝资本加入 2019-05-14
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-05-14
  • 让“绿领”引领农村新风尚 2019-05-13
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-05-13
  • 从追赶时代到引领时代——从深圳发展奇迹看中国改革开放40年 2019-05-12
  • 轩辕坛-当售后服务插上互联网翅膀 2019-05-12
  • По окончании 1-й сессии ВСНП 13-го созыва состоялась встреча премьера Госсовета КНР Ли Кэцяна с журналистами 2019-05-12
  • 免费模板网标签tags 更多...
    您的位置:重庆时时彩五星3码必中 > div+css > nth-child(an+b)和:nth-of-type(an+b)的区别

    重庆时时彩093开奖结果:nth-child(an+b)和:nth-of-type(an+b)的区别

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

    分享到:

    重庆时时彩五星3码必中 www.qyw5.com.cn 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>

     

    本文地址://www.qyw5.com.cn/bjrm/h3054.html

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

    Copyright:2014-2019 www.freemoban.com Corporation,All Rights Reserved 免费模板网 版权所有 鄂ICP备19005084号

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

    建站咨询QQ
  • 明堂红木栽种海南黄花梨 让员工更加珍惜红木材料 2019-07-03
  • 端午假期广州全球“吸粉”迎客578万人次 2019-06-30
  • 中国的强大不是说说而己,不要因为有俩钱就以为成了世界老大 ! 拥有保护财富和维护主权的能力,才是真正强大的标志!(原创首发) 2019-06-30
  • 20年后中国受过高等教育人口达到3.5亿,比美国总人口还多,硕士生将达到2千5百万,博士2百万。这就是20年后中国的实力,这也是人类进步,建议美国平静接受,没必 2019-06-23
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-06-23
  • 争奇斗艳 洛阳牡丹进入盛花期  600多种牡丹迎春绽放 2019-06-23
  • 一语惊坛(5月21日):不忘初心,将改革开放进行到底,中国梦一定实现! 2019-06-23
  • 【见证西安】NO.9西安首届农民节,记录西安农村新生活! 2019-05-14
  • 【中国梦·大国工匠篇】“景德镇拉坯第一人”占绍林:手艺“满意”前谢绝资本加入 2019-05-14
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-05-14
  • 让“绿领”引领农村新风尚 2019-05-13
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-05-13
  • 从追赶时代到引领时代——从深圳发展奇迹看中国改革开放40年 2019-05-12
  • 轩辕坛-当售后服务插上互联网翅膀 2019-05-12
  • По окончании 1-й сессии ВСНП 13-го созыва состоялась встреча премьера Госсовета КНР Ли Кэцяна с журналистами 2019-05-12