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隔行换色扩展阅读 原 ...
随机推荐
- 【2021赣网杯web(一)】gwb-web-easypop
源码分析 <?php error_reporting(0); highlight_file(__FILE__); $pwd=getcwd(); class func { public $mod1 ...
- 6.Vue.js-条件与循环
条件判断 v-if 条件判断使用 v-if 指令: <div id="app"> <p v-if="seen">现在你看到我了</ ...
- 推荐2个Mac OS X上的JSON工具
原文:http://www.giser.net/?p=887 1 visual JSON 能够将JSON串以列表的方式展示,方便对JSON数据的解析. 2 JSONModeler 可以解析JSON串生 ...
- epoll 使用详解
epoll - I/O event notification facility在linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是e ...
- MySQL 面试题汇总（持续更新中）
COUNT COUNT(*) 和 COUNT(1) 根据 MySQL 官方文档的描述: InnoDB handles SELECT COUNT(*) and SELECT COUNT(1) opera ...
- Winamp栈溢出漏洞研究
Winamp作为一款在90年代最主流的音乐播放器,到现在仍有大量的忠实粉丝.当然也存在很多漏洞.下面具体分析的就是打开软件的更新历史信息而触发的一个缓冲区溢出漏洞. 0X01漏洞重现 正常的whats ...
- 字符串函数（Excel函数集团）
此处文章均为本妖原创,供下载.学习.探讨! 文章下载源是Office365国内版1Driver,如有链接问题请联系我. 请勿用于商业!谢谢 下载地址:https://officecommunity-m ...
- 对ORM的理解
1. 在面试中可能会问到这个问题,什么是ORM? ORM是对象关系映射(Object Relational Mapping),简称ORM,或O/RM,或O/R mapping,是一种程序技术. 白话理 ...
- 关于后端 Entity Model Domain 的分界线
前言:在我们开发中经常用一种类型的值来接收来自Dao层的数据并将它传送给前端,或者作为逻辑处理,一般这种类型有三种 Entity Model Domain 我们该如何准确的应用这三种类型呢?这三 ...
- JAVA结合WebSocket实现简单客服聊天功能
说明:该示例只简单的实现了客服聊天功能. 1.聊天记录没有保存到数据库中,一旦服务重启,消息记录将会没有,如果需要保存到数据库中,可以扩展 2.页面样式用的网上模板,样式可以自己进行修改 3.只能由用 ...