CSS3 :nth-child() ，nth-of-type(),nth-last-child() ，nth-last-of-type()

不支持IE8及以下IE

   :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

   :nth-last-child(),与上者相同，从最后一个子元素开始计数。

  :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

  :nth-last-of-type(),与上者相同， 从最后一个子元素开始计数。

 <div class="nth">
        <div>1-div</div>
        <p >2-p</p>
        <div >3-div</div>
        <div>4-div</div>
        <div>5-div</div>
    </div>

  <style>
        .nth div,.nth p{
            width:100px;
            height:100px;
            border:1px solid pink;
            float:left;
        }

        .nth div:nth-child(1),.nth div:nth-child(2),.nth div:nth-child(3){
            color:blue;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
        }
        .nth div:nth-of-type(1), .nth div:nth-of-type(2), .nth div:nth-of-type(3){
            background: orange;;
        }

        .nth div:nth-last-child(1){
            border:2px solid blue;
        }
        .nth p:nth-last-of-type(1){
            border:green 3px dotted;
        }

        .nth div:nth-of-type(odd){
            margin-top:50px;
        }
        .nth div:nth-of-type(even){
            padding-bottom:50px;
        }

    </style>