CSS伪类选择器使用实例

    今天的小技巧主要是搞明白了CSS3新增的伪类选择器，并和之前的伪类选择器做比较~~~

    每一次看伪类选择器的介绍总有一种语文没学好的感觉，so只能上实例理解了~

    这次主要学习了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)

//======================================================

实例用到的html结构

   
id="outer">
      
我是h1,父div中的第一个子元素
      
我第一个p元素，父div中的第二个子元素
      
我是第二个p元素，父div中的第二个子元素
      

      
id="inner">
         
我是h2，子div1中的第一个子元素
         
我是第一个p元素，子div1中的第二个子元素
         
我是第二个p元素，子div1中的第三个子元素
         
我是第三个p元素，子div1中的第四个子元素
      
      

      

         
我是第一个p元素，子div2中的第一个子元素
         
我是第二个p元素，子div2中的第二个子元素
      
      

      

         
我是h2，子div3的第一个子元素
         
我是唯一p元素，子div3的第二个子元素
      
      

      

         
我是唯一p元素，子div4中唯一一个子元素
      
   

一、p:first-of-type —— 该父元素中，所有p子元素中的第一个；

（1）直接使用，所有div标签中 第一个p元素变色

（2）与p:first-child的区别

p:first-child 要求是第一个元素,且类型必须为p

二、p:last-of-type ——该父元素中，所有p子元素中的最后一个；

与first-of-type类似

三、p:only-of-type——父div下，只有一个p标签的元素；有无其他标签无所谓，只要保证只有一个p

（1）直接使用

（2）与p:only-child的区别：

p:only-child 要求是div的唯一p元素，并且必须只有这一个元素

四、p:nth-child(2)——父元素的第2个子元素，且该子元素为p标签

//========================================

总结

xxx-child有两个条件：子元素在父元素中的位置 + 元素类型

xxx-of-type只有一个条件：该类子元素中的位置