: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. 8种MySQL分页方法总结

    这篇文章主要介绍了8种MySQL分页方法总结,小编现在才知道,MySQL分页竟然有8种实现方法,本文就一一讲解了这些方法,需要的朋友可以参考下 MySQL的分页似乎一直是个问题,有什么优化方法吗?网上 ...

  2. TCP 3-Way Handshake

    TCP是面向连接的协议,其数据传输过程分为建立连接.数据传送.释放连接三个阶段. 0 建立连接 建立连接的过程也就是常说的"三次握手": 客户端向服务器端发送一个SYN报文(SYN ...

  3. Springboot-WebFlux实现http重定向到https

    1 简介 Spring WebFlux是一个新兴的技术,Spring团队把宝都压在响应式Reactive上了,于是推出了全新的Web实现.本文不讨论响应式编程,而是通过实例讲解Springboot W ...

  4. 开源 一套 Blazor Server 端精致套件

    Blazor 作为一种 Web 开发的新技术已经发展有一段时间了,有些人标称 无 JS 无 TS,我觉得有点误导新人的意味,也有人文章大肆宣传 Blazor 是 JavaScript 的终结者,是为了 ...

  5. 分治思想--快速排序解决TopK问题

    ----前言 ​ 最近一直研究算法,上个星期刷leetcode遇到从两个数组中找TopK问题,因此写下此篇,在一个数组中如何利用快速排序解决TopK问题. 先理清一个逻辑解决TopK问题→快速排序→递 ...

  6. 编程坑太多，Map 集合怎么也有这么多坑？一不小心又踩了好几个！

    点赞再看,养成习惯,微信搜索『程序通事』,关注就完事了! 点击查看更多历史文章 上一篇 List 踩坑文章中,我们提到几个比较容易踩坑的点.作为 List 集合好兄弟 Map,我们也是天天都在使用,一 ...

  7. MES系统介绍(一)

    由于本人从事的行业主要为Mes行业,所以这里准备介绍一下Mes系统的基础概念和实际运用,并且以自己做过的一个实际案例(包括代码)来详细描述自己对Mes系统的认识,帮助小白扫盲,望大神勿喷. MES系统 ...

  8. mybatis传递参数的方法

    一.传递一个参数 例:根据员工编号查询员工的基本信息 1.在dao接口中声明一个方法 2.在mapper中实现该方法 3.测试 /** * 传递一个参数 */ public class Test02 ...

  9. 经典卷积神经网络算法(2)：AlexNet

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  10. (二)Redis在Mac下的安装与SpringBoot中的配置

    1 下载Redis 官网下载,下载 stable 版本,稳定版本. 2 本地安装 解压:tar zxvf redis-6.0.1.tar.gz 移动到: sudo mv redis-6.0.1 /us ...