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() 选择器，表格奇偶行变色的更多相关文章

  1. 纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色

    1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中 ...

  2. 用jquery控制表格奇偶行及活动行颜色

    虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难, ...

  3. (转)CSS3:nth-child()伪类选择器，奇偶数行自定义样式first-child

    原文地址 Table表格奇偶数行定义样式: CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年,但 ...

  4. c# maiform父窗体改变动态的gridew 奇偶行变色的快捷方法

    无需在每个usercontrol里边单个指定控件内gridview  隔行换色.只需要在主窗体内改成统一就好了 做到这点要明白.gridcontrol 是usercontrol 的子控件 , grid ...

  5. DEV GridControl TableView隔行换色/奇偶行换色

    GridControl中的TableView“奇偶行换色”这件事情纠结了我好几天,虽然已经是上个月的事情,好歹记录一下吧,万一有谁要用到呢. GridControl是长这个样子的, <dxg:G ...

  6. CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式

    转自爱设计 原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...

  7. html table奇偶行颜色设置 (CSS选择器)

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. & ...

  8. 如何修改antd中表格的表头样式和奇偶行颜色交替

    在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...

  9. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

随机推荐

  1. 转 Android中Activity的启动模式（LaunchMode）和使用场景

    转载请注明出处:http://blog.csdn.net/sinat_14849739/article/details/78072401本文出自Shawpoo的专栏我的简书:简书 一.为什么需要启动模 ...

  2. Linux基础命令---mysql

    mysql mysql是一个简单的sql shell,它可以用来管理mysql数据库. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.   1.语法      m ...

  3. 【Java 8】Optional 使用

    一.前言 如果要给 Java 所有异常弄个榜单,我会选择将 NullPointerException 放在榜首.这个异常潜伏在代码中,就像个遥控炸弹,不知道什么时候这个按钮会被突然按下(传入 null ...

  4. jstl中的choose标签

    <%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ ta ...

  5. arcgis api for js回调函数如何等待同步

    arcgis js开发往往会遇到同步异步的问题,有可能在上一步使用了arcgis js模块回调函数,下一步需要用上一步回调函数的结果,但是因为JavaScript是异步执行的,它并不会等待上一步的回调 ...

  6. C#和.NET 框架

    C#和.NET框架 在.NET之前 20世纪90年代,微软平台多数程序员使用VB.C或C++.他们使用的技术都有问题. 技术 问题 纯Win32 API 不是面向对象,工作量比MFC大 MFC(Mic ...

  7. Nginx配置重定向

    目录 一.简介 二.配置 访问a页面重定向到b页面 访问当前nginx,重定向到其他网址 一.简介 据相关变量重定向和选择不同的配置,从一个 location 跳转到另一个 location,不过这样 ...

  8. CF1569A Balanced Substring 题解

    Content 给定一个长度为 \(n\) 且仅包含字符 a.b 的字符串 \(s\).请找出任意一个使得 a.b 数量相等的 \(s\) 的子串并输出其起始位置和终止位置.如果不存在请输出 -1 - ...

  9. JAVA开发 环境基础 IDEA 常用快捷键

    java 源代码运行必须先用javac编译生成字节码文件 XXX.class运行 java XXX 进行运行 环境变量classpath:已编译的字节码文件搜索路径--临时配置: set classp ...

  10. listitems.ListItemCollectionPosition属性为空

    SPListItemCollection listitems = list1.GetItems(query);//当执行完上面的代码后,listitems.ListItemCollectionPosi ...