原文地址

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

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

语法:

:nth-child(an+b)

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

描述:

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

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

:nth-child(number)

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

例子:

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

第二种:倍数写法

:nth-child(an)

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

例子:

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前面也可以是负号,但留给下一部分讲。)

例子:

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

li:nth-child(3n+5){background:orange;}

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

li:nth-child(3n±0){background:orange;}

li:nth-child(±0n+3){background:orange;}

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

:nth-child(-an+b)

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

例子:

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

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

第五种:奇偶匹配

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

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

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

.table > tr:nth-child(even) > td {}  /*偶数行*/
.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. HTMLParser 笔记

    # 关于html.parse.HTMLParser的使用 from html.parser import HTMLParser class MyHtmlParser(HTMLParser): # 使用 ...

  2. Hystrix 详细说明

    在 Hystrix 入门中,使用 Hystrix 时创建命令并给予执行,实际上 Hystrix 有一套较为复杂的执行逻辑,简单来说明以下运作流程: 在命令开始执行时,会做一些准备工作,例如为命令创建响 ...

  3. 如何在Visual Studio 2013中连接中国版的Azure

    http://diaosbook.com/Post/2014/8/23/connect-azure-cn-in-vs2013   VS2013的Server Explorer在第一次连接Azure的时 ...

  4. Oracle Split字符串

    为了让 PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合在可以返回前,必须进行 ...

  5. py2exe 打包的两种方式

    cmd模式 #!/usr/bin/python #-*- coding: UTF-8 -*- from distutils.core import setup import py2exe setup( ...

  6. Thinkphp 关联模型

    1.定义关联模型 2.使用关联模型 D('BlogRelation')->relation(true)->add($data);

  7. Azure ARM (22) 使用Azure PowerShell创建Azure RM VM

    <Windows Azure Platform 系列文章目录> 在Azure China获得VM Image,可以执行下面的脚本. Get-AzureRmVMImagePublisher ...

  8. EXSI6.5复制文件太慢的解决方法

    听说裸金属服务器性能比在windows中安装VMware workstations要好,就在电脑上安装了一个EXSI6.5. 可是在复制文件时很慢,一个3G的文件复制了两三个小时,还时常担心网络会断, ...

  9. [蓝桥杯]ALGO-8.算法训练_操作格子

    题目描述: 问题描述 有n个格子,从左到右放成一排,编号为1-n. 共有m次操作,有3种操作类型: .修改一个格子的权值, .求连续一段格子权值和, .求连续一段格子的最大值. 对于每个2.3操作输出 ...

  10. elasticsearch 口水篇(3)java客户端 - Jest

    elasticsearch有丰富的客户端,java客户端有Jest.其原文介绍如下: Jest is a Java HTTP Rest client for ElasticSearch.It is a ...