在本教程中，我们将学习CSS伪类。

伪类 Pseudo-Class

我们使用伪类来指定元素的状态。

伪类的语法如下。

selector:pseudo-class {
	property : value
}

在下面的示例中，我们为p(段落)元素设置了规则。
当鼠标悬停在其顶部时，其颜色将变为蓝色。

p:hover {
	color : blue;
}

类和伪类

我们还可以使用class属性和伪类的值来设置元素的样式。

以下是语法。

.class:pseudo-class {
	property : value;
}

在以下示例中，我们为所有具有类sample-container的元素设置了规则。
当鼠标悬停在其顶部时，其颜色将变为蓝色。

.sample-container:hover {
	color : blue;
}

Id和伪类

我们还可以使用id属性和伪类的值来设置元素的样式。

以下是语法。

#id:pseudo-class {
	property : value;
}

在下面的示例中，我们为具有id user1-container的元素设置了规则。
当鼠标悬停在其顶部时，其颜色将变为蓝色。

#user1-container:hover {
	color : blue;
}

锚伪类

链接(锚点)有4个重要状态，并且可以处于任何一种状态。

• link链接-未访问时
• visited已访问-单击链接时
• hover悬停-鼠标悬停在链接上时
• active激活-单击链接时

单击此处以获取CSS链接教程。

我们可以使用以上4种状态作为伪类来设置锚元素的样式。

在下面的示例中，我们编写了一些样式规则，以使用伪类基于状态为锚文本着色。

a:link {
	color : blue;
}

a:visited {
	color : red;
}

a:hover {
	color : green;
}

a:active {
	color : yellow;
}

:checked

我们使用：checked伪类来选择所有选择的复选框，单选输入元素和选择菜单的选项元素并为其设置样式。

在以下示例中，选中的输入复选框元素将获得右边距。

input[type=checkbox]:checked {
	margin-right : 20px;
}

:disabled

我们使用：disabled伪类来选择禁用元素并为其设置样式。

在以下示例中，禁用的输入文本元素的背景色设置为浅灰色。

input[type=text]:disabled {
	background-color : lightgray;
}

:enabled

我们使用：enabled伪类来选择启用元素的样式。

在以下示例中，启用的输入文本元素的背景色设置为浅黄色。

input[type=text]:enabled {
	background-color : lightyellow;
}

:invalid

我们使用:: invalid伪类来选择和设置具有无效值的元素。
例如，如果我们有一个用于电子邮件的输入字段，并且它的值无效，那么将应用样式。

在以下示例中，具有无效值的输入电子邮件元素的背景色设置为大马哈鱼。

input[type=email]:invalid {
	background-color : salmon;
}

:valid

我们使用：valid伪类来选择和设置具有有效值的元素。
例如，如果我们有一个用于电子邮件的输入字段并且它具有有效值，那么将应用样式。

在以下示例中，具有有效值的输入电子邮件元素的背景色设置为浅绿色。

input[type=email]:valid {
	background-color : lightgreen;
}

:optional

我们使用伪类"：optional"来选择和设置没有必需属性的元素的样式。

在以下示例中，输入文本元素的背景色设置为浅黄色，因为它是可选的。

input[type=text]:optional {
	background-color : lightyellow;
}

:required

我们使用:: required伪类来选择具有必需属性的元素并为其设置样式。

在以下示例中，根据需要将输入文本元素的背景色设置为lightskyblue。

input[type=text]:required {
	background-color : lightskyblue;
}

:first-child

我们使用：first-child伪类来选择元素并为其父元素的第一个元素设置样式。

在下面的示例中，其父元素的所有第一个子元素的背景色设置为浅黄色。

p:first-child {
	background-color : lightyellow;
}

:last-child

我们使用：last-child伪类来选择元素并为其父元素的最后一个元素设置样式。

在下面的示例中，其父元素的所有最后一个子元素的背景色设置为浅黄色。

p:last-child {
	background-color : lightyellow;
}

:nth-child()

我们使用:: nth-child(X)伪类来选择元素并为其样式设置元素，该元素为其父元素的第X个子元素。

在以下示例中，其父元素的第二个子元素的背景色设置为浅黄色。

p:nth-child(2) {
	background-color : lightyellow;
}

:nth-last-child()

我们使用：nth-last-child(X)伪类来选择元素并设置元素样式，这些元素是其上一个元素的第X个子元素。

在以下示例中，其上一个元素的第二个子元素的背景颜色从最后一个设置为浅黄色。

p:nth-last-child(2) {
	background-color : lightyellow;
}

:focus

我们使用：focus伪类来选择和设置焦点元素。

在以下示例中，聚焦元素的背景色设置为浅绿色。

input[type=text]:focus {
	background-color : lightgreen;
}

:hover

当鼠标悬停在伪代码上时，我们使用：hover伪类来选择元素并设置样式。

在以下示例中，将鼠标悬停在其上的元素的背景色设置为浅绿色。

input[type=text]:hover {
	background-color : lightgreen;
}