E:first-of-type

匹配E元素的某个类型的兄弟元素的第一个元素。(来源: 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>Lorem ipsum dolor sit amet, consectetur</div>
  6. </div>

CSS:

  1. div:first-of-type{font-style:italic}

输出:

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

在这个例子中,第二行文字将会是斜体的,因为它是父元素下的第一个div子元素。