伪类选择唯一之元素

only-child

如果这个元素是它父亲的唯一子元素，那么就选中了，上代码

	article :only-child {
            color: red;
        }
	<article>
        <h1>我不是红色</h1>   // h1不是article的唯一子元素，article有3个子元素(1个h1和2个div)，因此它不红
        <div>
            <h1>我是红色</h1>	// 这里的h1是div的唯一子元素，所以是红色的，下面的同理
        </div>
        <div>
            <h1>我是红色</h1>
        </div>
    </article>

 article> :only-child {
         color: red;
     }
 <article>
     <h1>我不是红色</h1>   // h1不是article的唯一子元素，article有3个子元素(1个h1和2个div)，因此它不红
     <div>
         <h1>我不是红色</h1>	// 这里的h1是div的唯一子元素，但不是article的唯一子元素，下面的同理
     </div>
     <div>
         <h1>我不是是红色</h1>
     </div>
 </article>

only-of-type

子元素中必须唯一一个类型，上代码好解说

   article> :only-of-type {
           color: red;
       }
   <article>
       <h1>我是红色</h1>   // article有3个子元素(1个h1和2个div)，这个h1是唯一的
       <div>
           <h1>我不是红色</h1>	// 这里的h1是div包含的唯一一个h1，但这个h1是孙子，不满足article>，下面的道理相同
       </div>
       <div>
           <h1>我不是是红色</h1>
       </div>
   </article>

   article  :only-of-type {
           color: red;
       }
   <article>
       <h1>我是红色</h1>   // article有3个子元素(1个h1和2个div)，这个h1是它包含的唯一一个h1
       <div>
           <h1>我是红色</h1>	// 这里的h1是div包含的唯一一个h1，而选择器是选择article的所有后代，下面的道理相同
       </div>
       <div>
           <h1>我不是是红色</h1>
            <h1>我不是是红色</h1>
       </div>
   </article>