CSS-常见的伪类选择器的用法详解

:first-child

:first-child 相对于父级元素做参考，选择所有子元素中的第一个子元素，第一个子元素必须是规定的元素类型，如果不是则不会被选择

示例：

<dl>
	<dt>我的颜色dt>
	<dd>颜色dd>
	<dd>颜色dd>
	<dt>我的颜色dt>
	<dd>颜色dd>
dl>
<dl>
	<dt>我的颜色dt>
	<dd>颜色dd>
	<dd>颜色dd>
	<dt>我的颜色dt>
	<dd>颜色dd>
dl>

dt:first-child{
     
	color: red;
}

如下方法就无法选中第一个子元素

dd:first-child{
     
	color: yellow;
}

:last-child

:last-child 相对于父级元素做参考，选择所有子元素中的最后子元素，最后一个子元素的元素类型与选择器规定的类型一致才会被选择

dd:last-child{
     
	color: green;
}

如下方法就无法选中最后一个子元素

dt:last-child{
     
	color: green;
}

:first-of-type

:first-of-type 相对于父级做参考，选择所有子元素中的特定类型的第一个子元素；选择的是特定类型元素中的第一个，并不是选择：规定的元素类型并且是第一个子元素

dd:first-of-type{
     
	color: yellow;
}

:last-of-type

:last-of-type 相对于父级做参考，选择所有子元素中的特定类型的最后一个子元素

dd:last-of-type{
     
	color: pink;
}