• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :nth-child()

    版本:CSS3

    :nth-child(an+b)这个 CSS 伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)

    • 0n+3 或简单的 3 匹配第三个元素。
    • 1n+0 或简单的 n 匹配每个元素。(兼容性提醒:在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的,可根据喜好任选其一来使用。)
    • 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素(n=0时,2n+0=0,第0个元素不存在,因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
    • 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
    • 3n+4 匹配位置为 4、7、10、13...的元素。
    • a 和 b 都必须为整数,并且元素的第一个子元素的下标为 1。换言之就是,该伪类匹配所有下标在集合{an + b; n = 0, 1, 2,...}中的子元素。另外需要特别注意的是,an 必须写在 b 的前面,不能写成 b+an 的形式。

    语法:

    E:nth-child(n){sRules}

    匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。n可以是一个数字,一个关键字,或者一个公式。

    :nth-child(an+b)这个CSS 伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)。示例:

    • 0n+3或简单的3匹配第三个元素。
    • 1n+0或简单的n匹配每个元素。(兼容性提醒:在 Android 浏览器 4.3 以下的版本n1n的匹配方式不一致。1n1n+0是一致的,可根据喜好任选其一来使用。)
    • 2n+0或简单的2n匹配位置为 2、4、6、8...的元素(n=0时,2n+0=0,第0个元素不存在,因为是从1开始排序)。你可以使用关键字even来替换此表达式。
    • 2n+1匹配位置为 1、3、5、7...的元素。你可以使用关键字odd来替换此表达式。
    • 3n+4匹配位置为 4、7、10、13...的元素。

    ab都必须为整数,并且元素的第一个子元素的下标为 1。换言之就是,该伪类匹配所有下标在集合{an + b; n = 0, 1, 2,...}中的子元素。另外需要特别注意的是,an必须写在b的前面,不能写成b+an的形式。

    选择器示例

    <table>表格中的<tr>举例:

    • tr:nth-child(2n+1):表示HTML表格中的奇数行。
    • tr:nth-child(odd):表示HTML表格中的奇数行。
    • tr:nth-child(2n):表示HTML表格中的偶数行。
    • tr:nth-child(even):表示HTML表格中的偶数行。

    <sapn>举例:

    • span:nth-child(0n+1):表示子元素中第一个且为span的元素,与:first-child选择器作用相同。
    • span:nth-child(1):表示父元素中子元素为第一的并且名字为span的标签被选中。
    • span:nth-child(-n+3):匹配前三个子元素中的span元素。

    浏览器支持

    IE9+以及新版浏览器都支持:nth-child()

    例子

    • E:nth-child(n)匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效,但n会继续递增。
    • 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是<body>,即E可以是<body>的子元素
    • 该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)

    使用E:nth-child(n)实现奇偶:

    因为(n)代表一个乘法因子,可以是0,1,2,3,...,所以(2n)换算出来会是偶数,而(2n+1)换算出来会是奇数

    li:nth-child(2n){color:#f00;}   /*偶数*/
    li:nth-child(2n+1){color:blue;} /*奇数*/
    
    <ul>
    	<li>列表项一</li>
    	<li>列表项二</li>
    	<li>列表项三</li>
    	<li>列表项四</li>
    </ul>
    
    • 列表项一
    • 列表项二
    • 列表项三
    • 列表项四

    使用odd,even实现奇偶:

    关键字odd代表奇数,even代表偶数

    li:nth-child(even){color:#f00;}  /*偶数*/
    li:nth-child(odd){color:blue;}   /*奇数*/
    
    
    <ul>
    	<li>列表项一</li>
    	<li>列表项二</li>
    	<li>列表项三</li>
    	<li>列表项四</li>
    </ul>
    
    • 列表项一
    • 列表项二
    • 列表项三
    • 列表项四

    注意

    E:nth-child(n)会选择父元素的第n个子元素E,如果第n个子元素不是E,则是无效选择符,但n会递增。

    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    
    <p>第3个p</p>
    <span>第2个span</span>
    
    <p>第4个p</p>
    <p>第5个p</p>
    
    
    p:nth-child(3){color:#f00;}
    

    第三个<p>字体颜色不会是红色,因为第三个是<span>标签。p:nth-child(3)就不会命中任何一个元素。

    第1个p

    第2个p

    第1个span

    第3个p

    第2个span

    第4个p

    第5个p

    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    
    <p>第3个p</p>
    <span>第2个span</span>
    
    <p>第4个p</p>
    <p>第5个p</p>
    
    
    p:nth-child(4){color:#f00;}
    

    这时你以为会命中第4个p,但其实命中的却是第3个p,因为它是第4个子元素

    第1个p

    第2个p

    第1个span

    第3个p

    第2个span

    第4个p

    第5个p

    保险方式

    假设不确定第1个子元素是否为E,但是又想命中第1个E,应该这样写:

    p:first-of-type{color:#f00;}
    
    //或者这样写:
    
    p:nth-of-type(1){color:#f00;}
    

    参考:first-of-type:nth-of-type()

    <h3><code>span:nth-child(2n+1)</code>, without an
       <code>&lt;em&gt;</code> among the child elements.</h3>
    <p>children 1, 3, 5, and 7 are selected.</p>
    <div class="first">
      <span>span 1!</span>
      <span>span 2</span>
      <span>span 3!</span>
      <span>span 4</span>
      <span>span 5!</span>
      <span>span 6</span>
      <span>span 7!</span>
    </div>
    
    <br>
    
    <h3><code>span:nth-child(2n+1)</code>, with an
       <code>&lt;em&gt;</code> among the child elements.</h3>
    <p>children 1, 5, and 7 are selected.<br>
       3 is used in the counting because it is a child, but it isn't
       selected because it isn't a <code>&lt;span&gt;</code>.</p>
    <div class="second">
      <span>span!</span>
      <span>span</span>
      <em>this is an `em`.</em>
      <span>span</span>
      <span>span!</span>
      <span>span</span>
      <span>span!</span>
      <span>span</span>
    </div>
    
    <br>
    
    <h3><code>span:nth-of-type(2n+1)</code>, with an
       <code>&lt;em&gt;</code> among the child elements.</h3>
    <p>children 1, 4, 6, and 8 are selected.<br>
       3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, 
       not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
       children of that type. the <code>&lt;em&gt;</code> is completely skipped
       over and ignored.</p>
    <div class="third">
      <span>span!</span>
      <span>span</span>
      <em>this is an `em`.</em>
      <span>span!</span>
      <span>span</span>
      <span>span!</span>
      <span>span</span>
      <span>span!</span>
    </div>
    
    
    
    
    
    //CSS
    
    
    span,
    div em {
      padding: 5px;
      border: 1px solid green;
      display: inline-block;
      margin-bottom: 3px;
    }
    
    .first span:nth-child(2n+1),
    .second span:nth-child(2n+1),
    .third span:nth-of-type(2n+1) {
      background-color: lime;
    }
    

    span:nth-child(2n+1), without an <em> among the child elements.

    children 1, 3, 5, and 7 are selected.

    span 1!span 2span 3!span 4span 5!span 6span 7!

    span:nth-child(2n+1), with an <em> among the child elements.

    children 1, 5, and 7 are selected.
    3 is used in the counting because it is a child, but it isn't selected because it isn't a <span>.

    span!spanthis is an `em`.spanspan!spanspan!span

    span:nth-of-type(2n+1), with an <em> among the child elements.

    children 1, 4, 6, and 8 are selected.
    3 isn't used in the counting or selected because it is an <em>, not a <span>, and nth-of-type only selects children of that type. the <em> is completely skipped over and ignored.

    span!spanthis is an `em`.span!spanspan!spanspan!

    上篇::only-child

    下篇::target