CSS3的nth-child() 选择器,表格奇偶行变色
nth-child() 应用背景
CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样。这样的兼容性很好。但是最近在做手机网站的时候,由于手机网站对浏览器兼容要求相对较低,手机浏览器大部分都支持css3,这就大大提高了开发效率。可以随意使用CSS3 :nth-child()伪类选择器。
nth-child()浏览器支持
IE9及以上版本,火狐,谷歌,Safari ,Opera都支持!
定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 n个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
例如:
p:nth-child(2)
{
background:#ff0000;
} <body> <h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p> </body>
上面这段代码请问那个段落颜色是红色的?
答案是“haorooms第一个段落。”颜色变成了红色!
解释::nth-child(n) 选择器匹配属于其父元素的第 n个子元素,不论元素的类型。p:nth-child(2),P标签的父元素是body,body的第二个子元素是“haorooms第一个段落。”所以haorooms第一个段落颜色变为了红色!!!
注意
很多朋友经常把:nth-child() 和:nth-of-type()混淆。
CSS3 :nth-of-type() 选择器的意思是“规定属于其父元素的第二个 p 元素”
看下面的例子:
p:nth-of-type(2)
{
background:#ff0000;
} <body> <h1>这是标题</h1>
<p>haorooms第一个段落。</p>
<p>haorooms第二个段落。</p>
<p>haorooms第三个段落。</p>
<p>haorooms第四个段落。</p> </body>
代码一样,我的样式仅仅是把 p:nth-child(2)改成了 p:nth-of-type(2),现在就是“haorooms第二个段落。”颜色变成了红色。
奇偶数匹配
现在开始说说我开通说的table的tr偶数行变色的问题了。
因为table的子元素一般是tr,不会有别的,所以可以用
tr:nth-child(odd) 与 tr:nth-child(even)
当然也可以用
tr:nth-of-type(odd) tr:nth-of-type(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
倍数写法
:nth-child(an) 【:nth-of-type(an)同理,不解释】
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
例子:
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*
延伸
:nth-child(2n+1), :nth-child(2n-3) , :nth-child(4n+3) ,还可以 :nth-child(-an+b)也就是反向匹配。
总之,你可以用了:nth-child伪类,可以对多个标签有规律的进行不同的显示,显示出CSS3的强大。css3需要多用,熟能生巧,在书写的时候,经常会把一些css3的属性忘掉,你可以多手写几遍。
CSS3的nth-child() 选择器,表格奇偶行变色的更多相关文章
- 纯CSS3代码实现表格奇偶行异色,鼠标悬浮变色
1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中 ...
- 用jquery控制表格奇偶行及活动行颜色
虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难, ...
- (转)CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child
原文地址 Table表格奇偶数行定义样式: CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年,但 ...
- c# maiform父窗体改变动态的gridew 奇偶行变色的快捷方法
无需在每个usercontrol里边单个指定控件内gridview 隔行换色.只需要在主窗体内改成统一就好了 做到这点要明白.gridcontrol 是usercontrol 的子控件 , grid ...
- DEV GridControl TableView隔行换色/奇偶行换色
GridControl中的TableView“奇偶行换色”这件事情纠结了我好几天,虽然已经是上个月的事情,好歹记录一下吧,万一有谁要用到呢. GridControl是长这个样子的, <dxg:G ...
- CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式
转自爱设计 原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...
- html table奇偶行颜色设置 (CSS选择器)
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. & ...
- 如何修改antd中表格的表头样式和奇偶行颜色交替
在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
随机推荐
- 如果通过 IP 判断是否是爬虫
通过 IP 判断爬虫 如果你查看服务器日志,看到密密麻麻的 IP 地址,你一眼可以看出来那些 IP 是爬虫,那些 IP 是正常的爬虫,就像这样: 在这密密麻麻的日志里面,我们不仅要分辨出真正的爬虫 I ...
- 关于stm32不常用的中断,如何添加, 比如timer10 timer11等
首先可以从keil中找到 比如找到定时器11的溢出中断,如上图是26 然后,配置定时器11 溢出中断的时候,我就在:下面填上这个变量. 之后要写中断服务函数,也就是发生中断后要跳转到的函数. 需要知道 ...
- Linux学习 - 正则表达式
一.正则表达式与通配符 正则表达式:在文件中匹配符合条件的字符串,正则是包含匹配 通配符:用来匹配符合条件的文件名,通配符是完全匹配 二.基础正则表达式 元字符 作用 a* a有0个或任意多个 . 除 ...
- echo -e "\033[字背景颜色;字体颜色m字符串\033[0m
格式: echo -e "\033[字背景颜色;字体颜色m字符串\033[0m" 例如: echo -e "\033[41;36m something here \033 ...
- MySQL 用户权限相关命令
##1.创建用户: create user test identified by '123456';##identified后面跟密码 ##2.查询所有用户: select user from mys ...
- Synchronized和Lock接口
关于synchronized字段,不管该关键字是修饰方法还是修饰同步代码块,synchronzed拿到的都是对象. 当synchronized修饰的是方法时,synchronized所拿到的是调用该方 ...
- mysql深度优化与理解(迄今为止读到最优秀的mysql博客)
转载:https://www.cnblogs.com/shenzikun1314/p/6396105.html 本篇深入了解查询优化和服务器的内部机制,了解MySql如何执行特定查询,从中也可以知道如 ...
- <转>Android多线程总结
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://yuchen.blog.51cto.com/2739238/593019 --An ...
- <转>C/S架构分析
系统架构师-基础到企业应用架构-客户端/服务器 开篇 上篇,我们介绍了,单机软件的架构,其实不管什么软件系统,都是为了解决实际中的一些问题,软件上为了更好的解决实际的问题才会产生,那么对于单机软 件的 ...
- SpringBoot Redis 发布订阅模式 Pub/Sub
SpringBoot Redis 发布订阅模式 Pub/Sub 注意:redis的发布订阅模式不可以将消息进行持久化,订阅者发生网络断开.宕机等可能导致错过消息. Redis命令行下使用发布订阅 pu ...