首尾元素伪类选择

first-child

表示第一个子元素，子元素的第一个子元素也可以，上代码

	article :first-child {
            color: red;
    }
	<article>
        <h1>我是红色</h1>    // 这是article的第一个子元素
        <div>
            <h1>我是红色</h1>	// 这是div的第一个子元素
            <h1>我不是红色</h1>
        </div>
    </article>

	article> :first-child {  // 这么写就不包含孙子及以后的孙子的后代了
            color: red;
    }
	<article>
        <h1>我是红色</h1>    // 这是article的第一个子元素
        <div>
            <h1>我不是红色</h1>	// 这是div的第一个子元素，是article的孙子，所以不是红色
            <h1>我不是红色</h1>
        </div>
    </article>

first-of-type

第一个某种类型的元素

	article>h1:first-of-type {  // 这么写就不包含孙子及以后的孙子的后代了
            color: red;
    }
	<article>
        <h1>我是红色</h1>    // 这是article的一代子孙，并且是第一个出现的h1
        <div>
            <h1>我不是红色</h1>	// article的孙子元素，肯定不予考虑
            <h1>我不是红色</h1>
        </div>
    </article>

	article h1:first-of-type {  // 包含子孙
            color: red;
    }
	<article>
        <h1>我是红色</h1>    // 这是article的一代子孙，并且是第一个出现的h1
        <div>
            <h1>我是红色</h1>	// div的子元素，并且是第一个出现的h1
            <h1>我不是红色</h1>
        </div>
        <div>
            <h1>我是红色</h1>	// div的子元素，并且是第一个出现的h1
            <h1>我不是红色</h1>
        </div>
    </article>

对于last-child与last-of-type道理同上