:nth-of-type()

定义：在拥有同一父元素的情况下（前提），匹配一组相同的兄弟元素，修改其样式

触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式

兼容：IE8及8以下不支持 Opera9.5以下不支持

:first-of-type

定义：在拥有同一父元素的情况下（前提），匹配一组兄弟元素中其类型的第一个元素，修改其样式

触发条件：在拥有同一父元素的情况下（前提），匹配在一组相同兄弟元素中的第一个元素，相当于 A B:nth-of-type(1)，其中A代表父元素，B代表A中相同的元素，修改其样式

兼容：IE8及8以下不支持 Opera9.5以下不支持

:last-of-type

定义：在拥有同一父元素的情况下（前提），匹配在一组相同兄弟元素中最后一个给定类型的元素，修改其样式

触发条件：在拥有同一父元素的情况下（前提），匹配在一组相同兄弟元素中的最后一个元素，修改其样式

兼容：IE8及8以下不支持 Opera9.5以下不支持

举个栗子

html代码：

  <ul>
    <li>我是ul中的第一个li</li>
    <li>我是ul中的第二个li</li>
    <li>我是ul中的第三个li</li>
    <li>我是ul中的第四个li</li>
  </ul>

  <ol>
    <li>我是ol中的第一个li</li>
    <li>我是ol中的第二个li</li>
    <li class='special-li'>
      我有子元素
      <ol>
        <li>我是子元素ol中的第一个li</li>
        <li>我是子元素ol中的第二个li</li>
        <li>我是子元素ol中的第三个li</li>
      </ol>
    </li>
    <li>我是ol中的第四个li</li>
  </ol>

css代码：

ul,ol{
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
}
li{
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-indent: 12px;
  line-height: 30px;
  color: #3300CC;
}
.special-li{
  padding-left:15px ;
}
ul li:nth-of-type(2n+1){/* 奇数列 */
  color: #993399;
}
ul li:last-of-type{/* ul下的最后一个li */
  background-color: #66FF33;
}
ol li:nth-of-type(2n){/* 偶数列 */
  color: #993399;
}
ol li:first-of-type:hover{/* ol下的第一个li，悬停效果 */
  color: #CC3300;
  font-weight: 900;
}
ol li:last-of-type:hover{/* ol下的最后一个li，悬停效果 */
  color: #CC3300;
  font-weight: 900;
}

效果图：