• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :nth-of-type()

    版本:CSS3

    :nth-of-type()这个 CSS 伪类,是针对具有一组兄弟节点的标签,用 n 来筛选出在一组兄弟节点的位置。

    语法:

    E:nth-of-type(n){sRules}
    • :nth-of-type()伪类指定一个实际参数,这个参数使用一种模式来匹配哪些元素应该被选中。
    • :nth-of-type()这个CSS 伪类匹配文档树中在其之前具有an+b-1个相同兄弟节点的元素,其中 n 为正值或零值。简单点说就是,这个选择器匹配那些在相同兄弟节点中的位置与模式an+b匹配的相同元素。
    • E元素是某个元素的子元素,E的父元素最高是<html>,即E可以是<html>的子元素,也就是说E可以是<body>
    • 该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E

    :nth-of-type()与:nth-child()

    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</sapn>
    <p>第3个p</p>
    <span>第2个span</sapn>
    

    如上HTML,假设要命中第一个span

    使用:nth-of-type()span:nth-of-type(1){color:#f00;}。如果使用:nth-child()span:nth-child(3){color:#f00;}

    浏览器支持

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

    示例

    //HTML
    
    <div>
      <div>这段不参与计数。</div>
      <p>这是第一段。</p>
      <p>这是第二段。</p>
      <div>这段不参与计数。</div>
      <p>这是第三段。</p>
      <p>这是第四段。</p>
    </div>
    
    //CSS
    
    /* 奇数段 */
    p:nth-of-type(2n+1) {
      color: red;
    }
    
    /* 偶数段 */
    p:nth-of-type(2n) {
      color: blue;
    }
    
    /* 第一段 */
    p:nth-of-type(1) {
      font-weight: bold;
    }
    
    <style>
    p:nth-last-of-type(2)
    {
    background:pink;
    }
    </style>
    
    
    <h3>元素1</h3>
    <p>元素2</p>
    <p>元素3</p>
    <p>元素4</p>
    
    

    元素1

    元素2

    元素3

    元素4