原文地址

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. 转 Oracle监听器启动出错:本地计算机上的OracleOraDb11g_home1TNSListener服务启动后又停止了解决方案

    今早刚上班.客户打电话过来说系统访问不了,输入用户名.用户号不能加载出来!听到这个问题,第一时间想到的是不是服务器重新启动了,Oracle数据库的相关服务没有启动的原因.查看服务的时候,发现相关的服务 ...

  2. 第一个Django项目

    安装 pip install Django==2.0.5 命令行下创建Django项目 django-admin startproject first_project # 创建项目 cd first_ ...

  3. idea14导入eclipse项目并部署运行完整步骤

    idea14导入eclipse项目并部署运行完整步骤 2015年05月12日 14:08:04 阅读数:40456 首先说明一下:idea里的project相当于eclipse里的workspace, ...

  4. LibreOffice转换文档到pdf时中文乱码

    根据我的测试,LibreOffice转换文档到pdf乱码主要有三个方面的原因: 1.centos缺少中文字体 2.jdk缺少中文字体 3.LibreOffice缺少中文字体. 解决该问题需要将wind ...

  5. Netty Tutorial Part 1: Introduction to Netty [z]

    Netty Tutorial, Part 1: Introduction to Netty Update:  Part 1.5 Has Been Published: Netty Tutorial P ...

  6. 【JVM】Class结构之常量池

    常量池 主要包括下面2类: 字面量(Literal):如int,double,String等: 符号引用(Symbolic Reference): 符号引用 类和接口的全限定名: 字段的名称和描述符: ...

  7. Survival Analysis

    code{white-space: pre;} Survival Analysis Zhu Lin 2017-3-18 What is Survival Analysis Survival analy ...

  8. 不同安卓手机的 安卓版本不同,xpath元素也不同

    模拟器是 夜神模拟器 版本是 4.4.2 LG手机  版本是 8.0.0

  9. 学习笔记之The Intelligent Investor, Rev. Ed

    The Intelligent Investor, Rev. Ed https://www.safaribooksonline.com/library/view/the-intelligent-inv ...

  10. OpenStack基础知识

        什么是云计算     地址规划 主机名 IP OpenStack01 172.30.2.135           有了云主机可以灵活扩展 OpenStack分为agent 和server端 ...