css之type选择器

type选择器是css3新增的选择器，它方便了选取父元素中有许多类型的子元素，选取器重你一种类型的子元素。

选择同一类型子元素第一个元素

html代码示例

<ul>
		<span>hello</span>
		<li>l1</li>
		<li>l2</li>
		<li>l3</li>
		<li>l4</li>
		<li>l5</li>
		<li>l6</li>
		<li>l7</li>
		<li>l8</li>
	</ul>

ul作为父元素，有span和li两种子元素

如果要选择li元素，就要使用类型选择器，用child选择器就不是太方便

假定要选择第一个li元素

语法格式

E:first-of-type

<style>
li:first-of-type {
			background-color: red;
		}
</style>

如果要选择最后一个li元素,语法格式

E:last-of-type

<style>
li:last-of-type {
    background-color:red;
    }
</style>

如果要选择指定的li元素

语法格式E：nth-of-type(n),n可以是数字，也可以是表达式

<style>
li:nth-of-type(3) {
    background-color:red;
    }
</style>

这个示例是选择第三个li元素

如果想选择倒数第几个li元素

语法格式E：nth-last-of-type(n)

<style>
li:nth-last-of-type {
 background-color:blue;
}
</style>