• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :only-of-type

    版本:CSS3

    CSS伪类:only-of-type代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。

    语法:

    E:only-of-type{sRules}

    匹配同类型中的唯一的一个同级兄弟元素E

    • :only-of-type代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。
    • 根据原来的定义,被选择的元素必须具有父元素。直到 Selectors Level 4 开始,这个要求就不是必须的了。
    • E元素是某个元素的子元素,E的父元素最高是<html>,即E可以是<html>的子元素,也就是说E可以是<body>
    • 该选择符总是能命中父元素的唯一同类型子元素E,不论该元素的位置

    浏览器支持

    IE9+以及新版浏览器都支持:only-of-type

    例子

    //html
    
    <main>
      <div>i am `div` #1.</div>
      <p>i am the only `p` among my siblings.</p>
      <div>i am `div` #2.</div>
      <div>i am `div` #3.
        <i>i am the only `i` child.</i>
        <em>i am `em` #1.</em>
        <em>i am `em` #2.</em>
      </div>
    </main>
    
    //CSS
    
    main :only-of-type {color: red;}
    
    i am `div`#1.

    i am the only `p` among my siblings.

    i am `div`#2.
    i am `div`#3.i am the only `i` child.i am `em`#1.i am `em`#2.
    ain>
    
    <style>
    p:only-of-type{background-color:#66cdcc;color:red;}
    </style>
    
    <div>
    	<p>这是一个段落。</p>
    </div>
    
    <div>
    	<p>这是一个段落。</p>
    	<p>这是一个段落。</p>
    </div>
    
    

    这是一个段落。

    这是一个段落。

    这是一个段落。

    上篇::last-of-type

    下篇::nth-of-type()