:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，除了<h>标签。
n 可以是数字、关键词或公式

例子一
<!DOCTYPE html>

<html>

<head>

<style>

p:nth-child(2)

{

background:pink;

}

</style>

</head>

<body>

<h1>这是标题</h1>

<p>第一个段落。</p>

<p>第二个段落。</p>

<p>第三个段落。</p>

<p>第四个段落。</p>

</body>

</html>

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

例子二
<!DOCTYPE html>

<html>

<head>

<style>

p:nth-child(odd)

{

background:green;

}

p:nth-child(even)

{

background:pink;

}

</style>

</head>

<body>

<h1>这是标题</h1>

<p>第一个段落。</p>

<p>第二个段落。</p>

<p>第三个段落。</p>

<p>第四个段落。</p>

<p>第五个段落。</p>

</body>

</html>

<h>标签是第一个元素，但不会改变样式

例子三

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值

<!DOCTYPE html>

<html>

<head>

<style>

p:nth-child(3n+0)

{

background:pink;

}

</style>

</head>

<body>

<h1>这是标题</h1>

<p>第一个段落。</p>

<p>第二个段落。</p>

<p>第三个段落。</p>

<p>第四个段落。</p>

<p>第五个段落。</p>

<p>第六个段落。</p>

<p>第七个段落。</p>

<p>第八个段落。</p>

<p>第九个段落。</p>

</body>

</html>

上面3n+0的意识是：指定了下标是 3 的倍数的所有 p 元素的背景色

:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”
:nth-child(n+4)选取大于等于4标签
:nth-child(-n+4)选取小于等于4标签
:last-child选取最后一个标签
:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

:nth-child的这些用法在实际中很用得着，不用单独给需要选取的标签加上ID或Class

作者：hi武林高手
链接：https://www.jianshu.com/p/2c07849fcb53
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

CSS3新子代选择器的更多相关文章

  1. css3新的选择器

    CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元 ...

  2. 总结CSS3新特性(选择器篇)

    CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...

  3. h5与c3权威指南笔记--css3新属性选择器

    [att*=val] 选择所有att属性值中包含val的.只要包含val值,不论val值在属性值的前面还是中间还是后面~ <style> div[class*=div]{ color: r ...

  4. css3新特性选择器（补充）

    1.选择p标签中的第一个字符 p:first-letter{ color:red; font-size:25px; } 2.选择p标签中的第一行 p:first-line{ color:red; fo ...

  5. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  6. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  7. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  8. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  9. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

随机推荐

  1. MongoDB学习（四）：通过Java使用MongoDB

    环境配置 在Java项目中使用MongoDB,需要在项目中引入mongo.jar这个包.下载地址:下载 请尽量下载较新的版本,本文用的是2.10.1. 连接MongoDB public synchro ...

  2. SQL Server遍历表中记录的2种方法

    SQL Server遍历表一般都要用到游标,SQL Server中可以很容易的用游标实现循环,实现SQL Server遍历表中记录.本文将介绍利用使用表变量和游标实现数据库中表的遍历. 表变量来实现表 ...

  3. 关于：Express会被Koa2取代吗？

    知会上看到有个问题<Express会被Koa2取代吗?>.刚好对Express.koa有点小研究,于是简单回答了一下. 1.先说结论 目前没有看到Express会被koa2取代的迹象. 目 ...

  4. 算法---BitMap

    问题: 假设有3亿个整数(范围0-2亿),如何判断某一个树是否存在.局限条件一台机器,内存500m. 常规的思路:我们可以将数据存到一个集合中,然后判断某个数是否存在:或者用一个等长的数组来表示,每个 ...

  5. Java——IO流超详细总结

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 在初学Java时,I ...

  6. C. K-Complete Word(小小的并查集啦~)

    永久打开的传送门 \(\color{Pink}{-------------分割-------------}\) \(n最大有2e5,那么暴力一定不行,找规律\) \(我们发现第i位的字符一定和第i+k ...

  7. Java实现栈（链表和线性表两种方法实现）

    一.栈的介绍 任何数据结构都是一种规则 栈就是在最基础的结构--线性结构和链式结构上面定义规则形成的 如果对基本数据结构(线性表和链表)有疑问的同学可以看我之前的博客:https://www.cnbl ...

  8. 关于网上quartus ii 生成fft核出现问题解决

    ------------恢复内容开始------------ 关于网上quartus ii 生成fft核出现问题解决 1:必须把软件破解啦 2:必须把IP核破解啦 破解步骤网上也有可以直接看,一定要全 ...

  9. [hdu4713 Permutation]DP

    题意:将一个数拆成若干数的和使得它们的最小公倍数最大 思路:一个数x可以拆成p1k1 + p2k2 + ... + pnkn形式,其中pi是质数或1.对于最小公倍数最大的情况,一定可以表示成这种形式. ...

  10. Python --表达式和运算符

    表达式 由一个或者几个数字或者变量和运算符组合成的一行代码 通常会返回一个结果 运算符 由一个以上的值经过变化得到新值的过程就叫做运算 用于运算的符号称为运算符 运算符的分类: 算数运算符 比较或者关 ...