伪类选择器

一、任务目标

掌握常用的伪类选择器

二、任务背景

将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。

三、任务内容

1、常用的伪类

伪类	描述
:hover	用于设置鼠标悬停在元素上方时的样式
:focus	用于设置元素获得焦点时的样式
:active	用于设置元素被激活时（按下按键时、松开按键时）的样式
:link	用于设置元素点击之前的样式（仅可用于a标签）
:visited	用于设置被访问的元素的样式（仅可用于a标签）
:first-child	用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求
:first-of-type	用于选取属于其父元素的第一个特定类型的子元素
:last-child	用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
:last-of-type	用于选取属于其父元素的最后一个特定类型的子元素
:nth-child(N)	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1）
:nth-of-type(N)	选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字（odd / even）、公式
:nth-last-child(N)	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式
:nth-last-of-type(N)	选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式

2、例：有以下代码，判断最终的样式效果

<style>
	p:first-child {
		color: red;
	}
</style>
<div>
	<span>CSDN能力认证中心</span>
	<p>C1见习能力认证</p>
	<p>C4专项能力认证</p>
	<p>C5全栈能力认证</p>
</div>

你是否认为最终效果是C1见习能力认证字体为红色？实际上所有内容字体都不会变红色

对于选择器p:first-child，需要同时满足两个要求：

• 该元素为p元素

• 该元素为该元素父级元素的第一个子元素

对于first-child、last-child、nth-child(n)、nth-last-child都存在此类情况，注意区分