E:nth-of-type

匹配某一类型的第N个同级子元素。(来源: W3C)

HTML:

  1. <div>
  2. <p>Lorem ipsum dolor sit amet, consectetur</p>
  3. <div>Lorem ipsum dolor sit amet, consectetur</div>
  4. <p>Lorem ipsum dolor sit amet, consectetur</p>
  5. </div>

CSS:

  1. p{font-style:normal}
  2. p:nth-of-type(2){font-style:italic}

输出:

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

在这个例子中,第三行文字将显示为斜体,因为它是第二个P子元素。p