:first-of-type 和 :first-child

• h1:first-of-type 指向第一个h1元素。主要是针对元素而言。在box1中，寻找第一个h1元素，在box2中，寻找第一个h1元素，即元素.type。
• h1:first-child 指向容器中的第一个元素。主要是对容器而言。在box1中，第一个元素是div，不是h1，所以box1中未找到元素，在box2中，第一个元素是h1，所以就是该.child元素。

    <div class="box1">
        <div class="box2">
            <h1 class="type child"></h1>
        </div>
        <h1 class="type"></h1>
        <h1></h1>
    </div>

• h1:last-of-type 指向最后一个h1元素。主要是针对元素而言。在box1中，寻找最后一个h1元素，在box2中，寻找最后一个h1元素，即元素.type。
• h1:last-child 指向容器中的最后一个元素。主要是对容器中的位置而言。在box1中，最后一个元素是h1，在box2中，最后一个元素是h1，所以就是.child元素。

    <div class="box1">
        <div class="box2">
            <h1 class="type child"></h1>
        </div>
        <h1></h1>
        <h1 class="type child"></h1>
    </div>

另外，:nth-of-type(n) 和 :nth-child(n) 也类似。

最后加强记忆 属性选择器 如 input[type='text'] img[src="xxx"]