: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. memcached 原子性操作 CAS模式

    2019独角兽企业重金招聘Python工程师标准>>> 应用场景分析: 如原来MEMCACHED中的KES的内容为A,客户端C1和客户端C2都把A取了出来,C1往准备往其中加B,C2 ...

  2. 贪心--HDU 2021 发工资咯

    Description 作为杭电的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日子,养家糊口就靠它了,呵呵,但是对于学校财务处的工作人员来说,这一天则是很忙碌的一天,财务处的小胡老师最近就 ...

  3. CF906D Power Tower

    扩展欧拉定理 CF906D Power Tower 洛谷交的第二个黑题 题意 给出一个序列\(w-1,w_2,\cdots,w_n\),以及\(q\)个询问 每个询问给出\(l,r\),求: \[w_ ...

  4. STM32 ADC多通道规则采样和注入采样

    layout: post tags: [STM32] comments: true 文章目录 layout: post tags: [STM32] comments: true 什么是ADC? STM ...

  5. .NETcore中使用jwt来对api进行身份验证

    对于 登陆,身份,授权这之类的操作,我们最常用的几种方法无非就是 cookie session token 这三者的差别 https://www.cnblogs.com/moyand/p/904797 ...

  6. Java TCP案例网络聊天室

    收获:1,加深了对多线程的一边一边的理解,可以将行为写成不同的类然后多线程 2,IO流的复习! 3,多线程中一边读取一边操作时容器最好(CopyOnWriteArrayList); 4,Tcp流程的熟 ...

  7. USACO 3.1 Contact

    http://www.nocow.cn/index.php/Translate:USACO/contact 题目大意:给一个只含0和1的序列,统计每个子序列的重复次数,并按次数递减来输出 考虑子序列时 ...

  8. ":-"的用法举例

    例子1: #!/bin/bash A=aaa C=${A:-bbb} echo $C 输出结果:aaa 例子2: #!/bin/bash A="" C=${A:-bbb} echo ...

  9. mysql批量修改

    update odr_order_base INNER JOIN (select merchant_id,order_base_id from odr_order_commodity) b on od ...

  10. Hadoop2.8.1完全分布式环境搭建

    前言 本文搭建了一个由三节点(master.slave1.slave2)构成的Hadoop完全分布式集群(区别单节点伪分布式集群),并通过Hadoop分布式计算的一个示例测试集群的正确性. 本文集群三 ...