E:only-of-type

E:only-of-type { sRules }

需要注意2個要點：

• 首先，因為匹配的是父元素的子元素，這意味著E元素必須作為某個元素的子元素存在（E元素的父元素最高是html，也就是說E元素最高是body，這表示任何非html的元素都符合這個約束，因為html元素是根元素）。

• 其次，父元素可以有多個子元素，但其中的子元素E必須是唯一的，不能出現(xiàn)多個。

  來看下面的例子：

  有如下一段CSS：

  .demo span:only-of-type { color: #f00; }

  該選擇器表示要匹配 .demo 下唯一的span元素

  示例一，假設有如下HTML：

  <div id="qg1vjhaigs" class="demo"> <span>span1</span> </div>

  毫無疑問，因為span1是 .demo 唯一的子元素，所以span1會被命中

  示例二，假設有如下HTML：

  <div id="qg1vjhaigs" class="demo"> <p>p1</p> <span>span1</span> </div>

  可以看到span1也會被命中，雖然此例中.demo有2個子元素，但span1是.demo唯一的span子元素

  示例三，假設有如下HTML：

  <div id="qg1vjhaigs" class="demo"> <p>p1</p> <span>span1</span> <span>span2</span> </div>

  此時span將不會被命中，因為.demo有2個span子元素，不滿足唯一性要求。

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持