: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. 图论--最长路--洛谷P1807 最长路_NOI导刊2010提高（07）

    题目描述 设G为有n个顶点的有向无环图,G中各顶点的编号为1到n,且当为G中的一条边时有i < j.设w(i,j)为边的长度,请设计算法,计算图G中<1,n>间的最长路径. 输入格式 ...

  2. Jmeter的简单使用

    前言 对于jmeter的使用有很多内容,本章节只是简单介绍jmeter的两个方面的内容:一个是使用jmeter模拟postman发送http请求,一个是使用jmete进行压力测试. 更多的内容请参考官 ...

  3. Coursera课程笔记----C程序设计进阶----Week 4

    指针(一) (Week 4) 什么是"指针" 互联网上的资源--地址 当获得一个地址,就能得到该地址对应的资源,所以可以把"网址"称为指向资源的"指针 ...

  4. 【HBase】HBase与MapReduce的集成案例

    目录 需求 步骤 一.创建maven工程,导入jar包 二.开发MapReduce程序 三.运行结果 HBase与MapReducer集成官方帮助文档:http://archive.cloudera. ...

  5. 【HBase】表模型和基本操作介绍

    目录 HBase表模型 常用Shell操作 HBase表模型 创建一个hbase表,必须要有表名和列族名 列族 -- columnFamily,就是上图中的Column Family1 userInf ...

  6. Day_14【IO流】扩展案例3_对文本文件中的字符串内容进行反转

    分析以下需求,并用代码实现 项目根路径下有text.txt文件,内容如下 我爱黑马 123456 利用IO流的知识读取text.txt文件的内容反转后写入text.txt文件中 654321 马黑爱我 ...

  7. PHP导出excel文件，第二步先实现自写二维数组加入模板excel文件后导出

    今天主要研究数据加入EXCEL并导出的问题,先不从数据库提取数据导出,自己先写一个二维数组,然后遍历二维数组写入excel模板中导出,首先根据模板excel的内容书写对应的二维数组 $arr=arra ...

  8. 多线程高并发编程(9) -- CopyOnWrite写入时复制

    CopyOnWrite写入时复制 CopyOnWrite,即快照模式,写入时复制就是不同线程访问同一资源的时候,会获取相同的指针指向这个资源,只有在写操作,才会去复制一份新的数据,然后新的数据在被写操 ...

  9. nginx均衡负载

    一直在担心session 问题,结果试了2个web 论坛,discuz 和phpbb ,前面用nginx 均衡负载,后端是apache httpd +php ,mysql 用同一个,修改一下confi ...

  10. python 机器学习（一）机器学习概述与特征工程

      一.机器学习概述 1.1.什么是机器学习? 机器学习是从数据中自动分析获得规律(模型),并利用规律对未知数据进行预测 1.2.为什么需要机器学习? 解放生产力,智能客服,可以不知疲倦的24小时作业 ...