E:only-of-type { sRules }
需要注意2個要點:
其次,父元素可以有多個子元素,但其中的子元素E必須是唯一的,不能出現多個。
來看下面的例子:有如下一段CSS:
.demo span:only-of-type { color: #f00; }
該選擇器表示要匹配 .demo 下唯一的span元素
示例一,假設有如下HTML:
span1
毫無疑問,因為span1是 .demo 唯一的子元素,所以span1會被命中
示例二,假設有如下HTML:
p1
span1
可以看到span1也會被命中,雖然此例中.demo有2個子元素,但span1是.demo唯一的span子元素
示例三,假設有如下HTML:
p1
span1
span2
此時span將不會被命中,因為.demo有2個span子元素,不滿足唯一性要求。
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
IE9.0+ |