MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

简介

:first-of-type CSS 伪类匹配子元素中新的种类的元素(第一次出现叫做新)。

语法

element:first-of-type { /* style properties */ }

例子

从这个例子看得出来伪元素选择器能做到普通选择器不能做到的事.(注意div后面的空格,这使得element变为了div的所有后代元素)

div :first-of-type {
  background-color: lime;
}
<div>
  <span>This span is first!</span>
  <span>This span is not. :(</span>
  <span>what about this <em>nested element</em>?</span>
  <strike>This is another type</strike>
  <span>Sadly, this one is not...</span>
</div>

...选择效果:

规范

Specification Status Comment
Selectors Level 4
:first-of-type
Working Draft No change.
Selectors Level 3
:first-of-type
Recommendation Initial definition.

浏览器兼容

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 10.0 3.2

相关知识

文档标签和贡献者

 此页面的贡献者: ZackBee, sgzzy, Orange-C, sudo2015
 最后编辑者: ZackBee,