1. 免费模板网标签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.1198dvo.cn/bjrm/h3054.html

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

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

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

          建站咨询QQ
          67期香香精准内部资料 马鞍山市| 嘉定区| 霍林郭勒市| 抚顺市| 宁津县| 蛟河市| 彰化县| 页游| 桑植县| 米林县| 奉新县| 开远市| 南木林县| 林州市| 会泽县| 观塘区| 临清市| 铜陵市| 闻喜县| 凌云县| 尼木县| 邹城市| 固原市| 冕宁县| 自贡市| 湄潭县| http://www.coj1368.tw 藁城市| 元朗区| 朝阳市| 盐源县| 溧水县| 陈巴尔虎旗| 小金县| 三台县| 北海市| 咸丰县| 北碚区| 安多县| 雷山县| 乡城县| 仙桃市| 于田县| 渝中区| 龙山县| 旬邑县| 全南县| 漳浦县| 正阳县| 怀化市| 乌什县| 呼玛县| 钟祥市| 周宁县| 天台县| 措美县| http://895zby.com 大冶市| 怀来县| 乌恰县| 河间市| 尚志市| 昭通市| 高密市| 会理县| 广平县| 洛浦县| 巴马| 会泽县| 金湖县| 扎赉特旗| 鹰潭市| 陆丰市| 平昌县| 自治县| 罗源县| 洪江市| 柘荣县| 明星| 博湖县| 商南县| 开鲁县| 襄樊市| 安徽省| 济南市| 建湖县| 剑阁县| 定结县| 甘肃省| 同仁县| 遂川县| http://htfzcu.cn 睢宁县| 广德县| 碌曲县| 民和| 定安县| 沙河市| 邯郸县| 大埔区| 怀化市| 泸水县| 兴国县| 岳阳市| 鞍山市| 郯城县| 玉树县| 错那县| 穆棱市| 长沙县| 合江县| 贺兰县| 昭觉县| 平阳县| 长春市| 平舆县| 府谷县| 山阴县| 房产| 光泽县| 龙州县| http://www.rfjzvg.co 郴州市| 洪泽县| 昌江| 安丘市| 长沙市| 樟树市| 海丰县| 潮州市| 五河县| 历史| 白沙| 那坡县| 孟州市| 崇仁县| 高清| 方城县| 瑞昌市| 邹城市| 化德县| 泸西县| 和平县| 毕节市| 高邮市| 汪清县| 靖远县| 许昌县| 和田县| 子洲县| 进贤县| http://www.ifxbyc.co 长沙县| 松阳县| 盐源县| 嘉义市| 和平县| 罗甸县| 二连浩特市| 静宁县| 镇远县| 武宁县| 定南县| 洞头县| 乌拉特后旗| 原阳县| 丹棱县| 赤峰市| 茂名市| 沙洋县| 育儿| 化隆| 太湖县| 宁陵县| 繁峙县| 南木林县| 阜平县| 凌源市| 乳山市| 佛坪县| http://crv0532.tw 汽车| 巴楚县| 宜兰县| 灵石县| 四平市| 博爱县| 安庆市| 大理市| 信阳市| 镇平县| 桐柏县| 大石桥市| 中山市| 赫章县| 永川市| 宁河县| 定远县|