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常用30种选择器总结
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...
CSS3的[att$=val]选择器
1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...
CSS3 结构伪类选择器详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
css3新增加的选择器
css3新增加的选择器一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...
css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
Atitit.隔行换色变色 css3 结构性伪类选择器
Atitit.隔行换色变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读原 ...
CSS3 :nth-child()伪类选择器
CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标准已提出数年 ...
CSS3 结构性伪类选择器（2）
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

随机推荐

Postman文件上传
1:请求Url 2:选择消息体 3:选择表单参数 4:填写参数KEY-VALUE,记得打钩 5:Send发送请求
Hive数据类型和DDL操作
hive命令在Linux下的命令行中直接输入如下命令,可以查看帮助信息: # hive -help 常用的如-e.-f参数. 使用-e参数,可以直接在命令行传递SQL语句进行hive表数据的查询: ...
大数据-hadoop-MapReduce计算流程
MapReduce计算流程 1 首先是通过程序员所编写的MR程序通过命令行本地提交或者IDE远程提交 2 一个MR程序就是一个Job,Job信息会给Resourcemanger,向Resourcem ...
好的js书写习惯
1:单一判断 bad if (result) { console.log("秋叶"); } if (!result) { console.log("秋叶"); ...
HTML连载55-网易注册界面实战之input填充
一.又学一招:想要让两个盒子高度对齐,那么让他们浮动起来 <!DOCTYPE html> <html lang="en"> <head> < ...
CLAMP 1.0.1 Vulnhub Walkthrough
主机层面端口扫描探测: ╰─ nmap -p1-65535 -A -sV 10.10.202.137 访问web服务使用dirbuster 加大字段进行目录爆破 http://10.10.202.1 ...
Python3操作MySQL基于PyMySQL封装的类
Python3操作MySQL基于PyMySQL封装的类在未使用操作数据库的框架开发项目的时候,我们需要自己处理数据库连接问题,今天在做一个Python的演示项目,写一个操作MySQL数据库的类, ...
520表白酷炫html
html表白神器,动态浮动爱心,话不多说,直接看截图吧! 下面附上完整代码.别忘了点个赞哦! <!doctype html> <html> <head> <m ...
PWA学习笔记(二)
设计与体验 APP Shell: 1.应用从显示内容上可粗略划分为内容部分和外壳部分,App Shell 就是外壳部分,即页面的基本结构 2.它不仅包括用户能看到的页面框架部分,还包括用户看不到的代码 ...
用Loading 加载中的整页加载来做蒙层
总结:遇见的bug 如何写一个蒙层最初我打算的是自己写一个蒙层,但是写出来后, 不能够将整个屏幕全部覆盖.只能够覆盖除[顶部导航] 和[左侧菜单栏] 于是我就使用了element-ui中的 [Lo ...

CSS3的nth-child() 选择器