• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :nth-of-type(index/even/odd/equation)

    选择标签名相同的的第n个同级兄弟元素。

    jQuery(":nth-of-type(index/even/odd/equation)")

    index:每个相匹配子元素的索引值,从1开始,也可以是字符串evenodd,或一个方程式(例如:nth-of-type(even),:nth-of-type(4n))。

    • 因为jQuery的实现:nth-是严格来自CSS规范,n值是从1开始计数。
    • 对于所有其他选择器表达式比如:eq():even,jQuery遵循JavaScript的“0索引”的计数。

    注:

    :nth-of-type()选择器是jQuery 1.9新增的选择器,它是遵循CSS 3中结构性伪类选择符 E:nth-of-type(n)实现的。和CSS 3中结构性伪类选择符 E:nth-of-type(n)一样,它选择的是匹配所有父元素下同类型中的第n个同级兄弟元素E。

    :nth-of-type()选择器和:nth-child()选择器很容易混淆,至少我是这么认为的。看下面一个例子:


    <div class="test">
    	<p>A元素</p>
    	<div>B元素</div>
    	<p>C元素</p>
    	<p>D元素</p>
    </div>
    

    看下面的代码

    $("p:nth-of-type(2)") //选择的是C元素
    $("p:nth-child(2)") //什么元素也没选中
    

    两者比较:

    • 这里p:nth-of-type(2)选择器选择父元素的第二个段落p元素,它不管段落p元素在什么位置,段落p元素可能是该父级元素的第3个或者第5个,也可以是第n个子元素,这里n肯定大于2,只要父级元素<div class="test">有两个以上的段落p子元素,他就肯定能选择到第二个段落p元素。
    • 这里p:nth-child(2)选择器选择不到任何元素,p:nth-child(2)选择器要满足的条件是:
      1. 是一个段落p元素;
      2. 是父元素的第二个子元素

      上述的HTML结构中,<div class="test">的第二个子元素是div元素,而不是p元素,所以不满足条件,这样就选择不到任何元素

    例子

    查找每个span,这个 span 是其所有兄弟span元素中的第二个元素。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    .nth { color: red; }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>
      <span>John</span>,
      <b>Kim</b>,
      <span>Adam</span>,
      <b>Rafael</b>,
      <span>Oleg</span>
    </div>
    <div>
      <b>Dave</b>,
      <span>Ann</span>
    </div>
    <div>
      <i><span>Maurice</span></i>,
      <span>Richard</span>,
      <span>Ralph</span>,
      <span>Jason</span>
    </div>
    <script>
    $( "span:nth-of-type(2)" )
      .append( "<span> is 2nd sibling span</span>" )
      .addClass( "nth" );
    </script>
     
    </body>
    </html>
    

    上篇::last-of-type

    下篇::only-of-type