CSS3子元素选择方法nth-child和nth-of-type

ele:nth-child是选择第n个元素且为ele，若类型不匹配，则返回false；

nth-of-type是按类型来选，即选择第n个ele元素，其他类型的子元素不计入n的计算。

用一个简单的实例来说明其使用方法和区别：

<div class="wrapper">
    <ul class="demo">
        <h1>CSS3 Basics</h1>
        <li>nth-child(2) selector</li>
        <li>nth-of-type(2) selector</li>
        <el>nth-child not match</el>
    </ul>
</div>

.wrapper {
    padding: 20px 50px;
    background: black;
    font-size: 20px;
}
h1,el {
    color: white;
}
.demo li:nth-child(2) {
    color: orange;
}
.demo li:nth-of-type(2) {
    color: green;
    font-size: 28px;
}
.demo li:nth-child(4) {
    color: orange;
}

代码自解释，在线演示地址：
http://wow.techbrood.com/fiddle/2569