原文地址

Table表格奇偶数行定义样式:

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”

语法:

  1. :nth-child(an+b)

为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。

描述:

伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。

第一种:简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子:

  1. li:nth-child(3){background:orange;}

第二种:倍数写法

:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

例子:

  1. li:nth-child(3n){background:orange;}

第三种:倍数分组匹配

:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)

例子:

  1. li:nth-child(3n+1){background:orange;}
  2.  
  3. li:nth-child(3n+5){background:orange;}
  4.  
  5. li:nth-child(5n-1){background:orange;}
  6.  
  7. li:nth-child(3n±0){background:orange;}
  8.  
  9. li:nth-child0n+3){background:orange;}

第四种:反向倍数分组匹配

:nth-child(-an+b)

此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。

例子:

  1. li:nth-child(-3n+8){background:orange;}
  2.  
  3. li:nth-child(-1n+8){background:orange;}

第五种:奇偶匹配

:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

作者观点:表格奇偶数行定义样式就可以写成

  1. .table > tr:nth-child(even) > td {} /*偶数行*/
  2. .table > tr:nth-child(odd) > td {background-color: #ccc;} /*奇数行*/

(转)CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child的更多相关文章

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

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

  2. CSS3的一个伪类选择器:nth-child()

    CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...

  3. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  4. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  5. 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

    结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...

  6. 【CSS3】---结构性伪类选择器-first-child+last-child

    结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...

  7. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

  8. css3系列之伪类选择器

    Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:n ...

  9. css3中的伪类选择器

    一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...

随机推荐

  1. apache的MultipartEntityBuilder文件上传

    本文讲解多文件上传方法,不比较上传有几种方法和效率,而是定向分析apache的httpmime包的MultipartEntityBuilder类,源码包:httpmime-4.5.2.jar 一.常用 ...

  2. JSON C# Class Generator ---由json字符串生成C#实体类的工具

    json作为互联网上轻量便捷的数据传输格式,越来越受到重视.但在服务器端编程过程中,我们常常希望能通过智能提示来提高编码效率.JSON C# Class Generator 能将json格式所表示的J ...

  3. redis : 桌面管理工具 redis-desktop-manager使用指南

    概要:一款好用的Redis桌面管理工具,支持命令控制台操作,以及常用,查询key,rename,delete等操作. 下载软件,请点击下面链接,进入下载页,选择对应版本: https://redisd ...

  4. Google program AB程序的基本理解

    这个是2017年机器人项目中涉及到的一点东西,虽然没有派上什么大用场,但是还是有必要在这里记录一下! 1. 初始化Bot A. 配置各种路径,例如aiml,aimlif,config,set,map等 ...

  5. 在本机将本机的ip和mac绑定

    cmd命令框中输入arp -s ip mac即可绑定 解除绑定:arp -d ip

  6. 黄聪:C#“多线程线程间操作无效: 从不是创建控件的线程访问它。”,跨线程修改控件属性解决方案

    解决方案就是使用代理,在代理中调用主线程的方法来控制控件 /// <summary> /// 声明代理 /// </summary> delegate void SetText ...

  7. 黄聪:HBuilder左侧项目管理器如何不与标签页一起自动切换

    把这个按钮取消就好了

  8. Ubuntu 14.10 下Spark on yarn安装

    1 服务器分布 服务器 说明 192.168.1.100 NameNode 192.168.1.101 DataNode 192.168.1.102 DataNode 2 软件环境 2.1 安装JDK ...

  9. P1002过河卒

    传送 因为卒每到一个点上,就有两种情况.1.从左边过来.2.从上面过来.我们设f[i][j]为卒到[i][j]这个点的方案数,那么方程就是f[i][j]=f[i-1][j]+f[i][j-1],边界状 ...

  10. 峰Redis学习(6)Redis 数据结构(sorted-set的操作)

    第六节:Redis 数据结构之sorted-set 类型 存储Sorted-Set Sorted-Set和Set的区别   Sorted-Set中的成员在集合中的位置是有序的   存储Sorted-s ...