C3伪类选择器
来源:互联网 发布:扫雷技巧红包软件 编辑:程序博客网 时间:2024/05/30 12:30
E:nth-of-type(n) { sRules }
匹配同类型中的第n个同级兄弟元素E。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body
该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E
有一点需要注意的是:
HTML示例代码:
第1个p
第2个p
第1个span
第3个p
第2个span
span:nth-of-type(1){color:#f00;}如果使用E:nth-child(n):
span:nth-child(3){color:#f00;}
//////
E:nth-last-of-type(n) { sRules }
匹配同类型中的倒数第n个同级兄弟元素E。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body
该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E
///////
E:nth-child(n) { sRules }
匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)
使用E:nth-child(n)实现奇偶:
示例代码:
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
- 列表项一
- 列表项二
- 列表项三
- 列表项四
- 列表项一
- 列表项二
- 列表项三
- 列表项四
//////
E:nth-last-child(n) { sRules }
匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中倒数第一个子元素E,那么选择符可以写成:E:nth-last-child(1)
有一点需要注意的是:
HTML示例代码:
第1个p
第2个p
第1个span
第3个p
第2个span
p:nth-last-child(2){color:#f00;}而不是:
p:nth-last-child(1){color:#f00;}因为倒数第1个p,其实是倒数第2个子元素。基于选择符从右到左解析,首先要找到第1个子元素,然后再去检查该子元素是否为p,如果不是p,则n递增,继续查找
假设不确定倒数第1个子元素是否为E,但是又想命中倒数第1个E,应该这样写:
p:last-of-type{color:#f00;}或者这样写:
p:nth-last-of-type(1){color:#f00;}
- C3伪类选择器
- c3选择器
- C3选择器
- css选择器-伪类选择器
- CSS伪类选择器
- css3 伪类选择器
- CSS-伪类选择器
- 伪类选择器
- css3伪类选择器
- 结构性伪类选择器
- CSS3伪类选择器
- html伪类选择器
- CSS选择器&伪类
- CSS3伪类选择器
- 伪类选择器
- 伪类选择器
- CSS-伪类选择器
- CSS伪类选择器
- Java获取网页源码处理
- 第三篇:类初始化
- Wechall刷题(三)Crypto
- POJ 1975 Median Weight Bead floyd求传递闭包 || bfs
- spring学习笔记 -- day10 spring中的jdbcTemplate
- C3伪类选择器
- Github 入门
- 字符集和字符编码(Charset & Encoding)
- ARM9-学习笔记(一)
- docker 如何批量删除镜像
- lintcode--不同的二叉查找树II
- 第四篇:类加载机制
- 使用pylint 规范python代码
- 微信群发,图文消息