: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. 从0开始搭建精灵宝可梦的检测APP

    从0开始搭建精灵宝可梦的检测APP 本文为本人原创,转载请注明来源链接 环境要求 Tensorflow1.12.0 cuda 9.0 python3.6.10 Android Studio Anaco ...

  2. USB设备驱动模型

    嵌入式设备驱动的编写,基本上都要按照一定的驱动模型编写.不这么做的话,一旦设备发生了更新和改变,大部分的驱动代码都要推倒重来,代码的重用率低,不具备移植性.所以在新版linux2.6.22以后的内核版 ...

  3. electron-vue 运行项目时会报Electron Security Warning (Node.js Integration with Remote Content)警告

    使用electron-vue时,运行项目总会出现如下警告: 解决方法:在src/renderer/main.js中加入: process.env['ELECTRON_DISABLE_SECURITY_ ...

  4. Web框架，Hibernate向数据库插入数据，数据库没有值怎么办？

    用web框架技术,使用Hibernate向数据库添加信息,控制台显示插入成功的语句,可是数据库却没有值:错误如下: (1)不要自己创建数据库!!,Web框架可以自己自动生成,自己创建可能会报错! (2 ...

  5. HTTPS GET | POST | DELETE 请求

    依赖: <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okhttp& ...

  6. puamap是什么意思

    artists map 定义格式:[puamap代号 名] 相关属性: 1.FIGHT 2.SAFE 安全区域 3.DARK 4.NEEDHOLE 配合mapinfo里 x,y -> x1,y1 ...

  7. Vular开发手记#1：设计并实现一个拼插式应用程序框架

    可视化编(rxeditor)辑告一段落,在知乎上发了一个问题,询问前景,虽然看好的不多,但是关注度还是有的,目前为止积累了21w流量,因为这个事,开心了好长一段时间.这一个月的时间,主要在设计制作Vu ...

  8. spring data jpa 多对多 ManyToMany

    环境搭建 源码地址:gitee:https://gitee.com/ytfs-dtx/JPA 导入依赖 <properties> <spring.version>5.2.5.R ...

  9. 真正免费，不限页数的PDF转Word工具

    真正免费,不限页数的PDF转Word工具 我们知道PDF转Word工具非常多,但大部分都有各种限制,限大小,限页数,加水印等等. 这其中绝大部分其实并不能做到格式完全一样,遇到图片更是直接傻了. 我们 ...

  10. Mysql 常用语句实战（3）

    前置 sql 语句 用来创建表.插入数据 ; DROP TABLE IF EXISTS dept_;-- 部门表 DROP TABLE IF EXISTS emp_;-- 部门表 ; SELECT @ ...