1. 免费模板网标签tags 更多...
          您的位置:首页 > div+css > CSS3 :nth-last-of-type() 选择器介绍

          CSS3 :nth-last-of-type() 选择器介绍

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

          分享到:

          本文介绍CSS3 :nth-last-of-type() 选择器可以用在一些高亮的栏目里面 指定的位置添加样式

          先来看看一个实例:规定属于其父元素的第二个 p 元素的每个 p,从最后一个子元素开始计数:

          <style>
          p:nth-last-of-type(2){background:#ff0000;}
          </style>
          <h3>这是标题</h3>
          <p>第一个段落。</p>
          <p>第二个段落。</p>

          ps:所有主流浏览器均支持 :nth-last-of-type() 选择器,除了 IE8 及更早的版本。

          定义和用法

          :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数。

          n 可以是数字、关键词或公式。

          提示:请参阅 :nth-last-child() ,该选择器选取父元素的第 N 个子元素,与类型无关,从最后一个子元素开始计数。

          介绍

          实例1:odd 和 even 奇数和偶数

          odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。

          在这里,我们为奇数和偶数 p 元素指定两种不同的背景色,从最后一个子元素开始计数:

          <style>
          p:nth-last-of-type(odd){background:#f00;}
          p:nth-last-of-type(even){background:#0f0;}
          </style>
          <p>第1个段落。</p>
          <p>第2个段落。</p>
          <p>第3个段落。</p>
          <p>第4个段落。</p>

          实例 2:使用公式 (an + b)

          公式 (an + b),表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

          在这里,我们指定了下标是 2 的倍数的所有 p 元素的背景色,从最后一个子元素开始计数:

          <style>
          p:nth-last-of-type(2n){background:#f00;}
          </style>
          <p>第1个段落。</p>
          <p>第2个段落。</p>
          <p>第3个段落。</p>
          <p>第4个段落。</p>

          使用2n效果同odd和even奇数和偶数

          <style>
          p:nth-last-of-type(2n-1){background:#f00;}
          p:nth-last-of-type(2n){background:#0f0;}
          </style>
          <p>第1个段落。</p>
          <p>第2个段落。</p>
          <p>第3个段落。</p>
          <p>第4个段落。</p>

          多行变色demo

          <style>
          p:nth-last-of-type(3n){background:#00f;}
          p:nth-last-of-type(3n-1){background:#f00;}
          p:nth-last-of-type(3n-2){background:#0f0;}
          </style>
          <p>第1个段落。</p>
          <p>第2个段落。</p>
          <p>第3个段落。</p>
          <p>第4个段落。</p>
          <p>第5个段落。</p>

          我们就会想到这个不是在表格里面用的蛮多吗?;卮鹫?br/>

          我们可以扩展到表格里面td  tr设置隔行变色,这样就不用像之前的变色加class的属性了,保持代码简洁和语义化

          本文地址:http://www.1198dvo.cn/bjrm/h3058.html

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

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

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

          建站咨询QQ
          67期香香精准内部资料 郓城县| 平武县| 仁化县| 丽水市| 司法| 黔东| 蒲江县| 都兰县| 平顺县| 安陆市| 航空| 长治县| 绥宁县| 历史| 镇雄县| 邯郸市| 松原市| 河西区| 石渠县| 卓尼县| 花莲市| 浮山县| 泰宁县| 甘德县| 芦溪县| 东乡族自治县| http://cylqvzl.tw 尚义县| 汤阴县| 历史| 彭山县| 永寿县| 临海市| 金平| 赤水市| 文登市| 扶绥县| 大英县| 兴海县| 三江| 通许县| 化德县| 连南| 涞源县| 晋城| 抚远县| 丁青县| 原阳县| 平昌县| 宣化县| 石景山区| 溧水县| 辽中县| 仪征市| 邻水| 东海县| http://yydekd.co 吉木萨尔县| 蛟河市| 延长县| 调兵山市| 卫辉市| 义马市| 辛集市| 兖州市| 上蔡县| 台江县| 孝感市| 高邑县| 鞍山市| 朔州市| 蒙山县| 广德县| 哈巴河县| 柳江县| 新和县| 江陵县| 山阳县| 永胜县| 托克托县| 溧阳市| 府谷县| 土默特右旗| 虹口区| 襄城县| 台前县| 沐川县| 潼南县| 张家川| 十堰市| 信丰县| http://sacuve.cn 延庆县| 集安市| 宜都市| 玉门市| 璧山县| 邮箱| 青阳县| 延川县| 方城县| 丁青县| 大港区| 延吉市| 海南省| 石屏县| 河津市| 盐城市| 永济市| 芜湖市| 亳州市| 离岛区| 浮梁县| 高密市| 延津县| 浦城县| 时尚| 稻城县| 疏附县| 砀山县| 永寿县| http://www.nfx471.cn 黄骅市| 界首市| 香河县| 云和县| 黎川县| 富平县| 资讯| 衡南县| 拉萨市| 江永县| 岳西县| 深泽县| 紫云| 香港| 北海市| 大安市| 城市| 唐河县| 手游| 浦东新区| 沐川县| 新津县| 克什克腾旗| 仙居县| 沐川县| 汽车| 民勤县| 乌审旗| 休宁县| http://2667rld.tw 新龙县| 建始县| 乌审旗| 乳源| 罗源县| 西盟| 瑞安市| 昆山市| 周至县| 综艺| 乌拉特后旗| 固始县| 中山市| 白朗县| 台南县| 苍山县| 隆昌县| 合阳县| 镇巴县| 黄平县| 甘孜县| 尉犁县| 灯塔市| 镇康县| 峡江县| 彩票| 通化县| 清水县| http://4269car.cn 穆棱市| 乌兰县| 石台县| 禄丰县| 柳河县| 昆山市| 宿迁市| 乐清市| 青神县| 印江| 娱乐| 肃北| 黔西| 肇州县| 武川县| 政和县| 伊宁市|