CSS 伪类：

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 当用户将鼠标悬停在元素上时设置元素的样式。
• 样式访问和未访问的链接不同。
• 当元素获得焦点时为其设置样式。

伪类的语法：

 选择器 **：** 伪类 **{**  
 适当的价值;  
 **}**

例如，让我们获取锚标记并向其添加一些伪类。

一条链接{
红色;
} → 锚元素最初将是红色的。 （未访问的链接）。

一个：访问{
颜色：蓝色；
} → 锚元素一旦被访问就会变成蓝色。

一：悬停{
颜色：绿色；
} → 当我们使用鼠标悬停在元素上时，锚元素变为绿色。

一：活跃{
颜色：粉红色；
} → 一旦选择了锚元素，它就会变成粉红色。

我们还可以将伪类与 HTML 类结合起来。
为了我，
div：悬停 .n-container{
背景颜色：红色；
}

在这里，我们是说，当我们将鼠标悬停在 分区， 具有类名的元素 .n 容器 应将其背景颜色更改为红色。同样，我们可以添加多个类。

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:first-child 伪类：

first-child 伪类匹配作为另一个孩子的第一个孩子的指定元素。
例如：

**p：第一个孩子{**  
 颜色：蓝色；  
 **}**

在这种情况下，如果该元素是任何其他元素的第一个子元素，则段落元素将变为蓝色。 （即）无论何时存在段落元素，如果它是其父元素的第一个元素，则样式将仅应用于它。

这里，第一个 para 元素是蓝色的，因为它是 body 的第一个 child-para 元素，第二个蓝色 para 是 div 标签的 first-child-para。

 p:第一个孩子我{  
 颜色：蓝色；  
 }

在这方面，它匹配所有 一世 元素是 para 元素的第一个子元素。

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

注意：这里我们以 para 元素为例。但我们也可以使用所有其他元素。

：检查→ 选择每个选中的元素。
例如：
**输入：选中{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:禁用 → 选择每个残疾人元素。
例如：
**输入：禁用{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

：空的 ： → 选择每一个

没有子元素的元素。
例如：
**p:空{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:启用 → 选择每个启用的元素。
例如：
**输入：启用{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:first-of-type → 选择每一个

第一个元素

其父元素。
例如：
**p:first-of-type{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:重点→ 选择具有焦点的元素。
例如：
**输入：焦点{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:last-child → 选择每一个

作为其父级的最后一个子级的元素。
例如：
**p:last-child{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:last-of-type → 选择每一个

最后一个元素

其父元素。
例如：
**p:last-of-type{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:not(选择器) → 选择每个不是

元素。
例如：
**:not(p){}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:nth-child(n) → 选择每一个

元素是 n 其父母的第一个孩子。
例如：
p:nth-child(2){} , 在此它选择 para 元素，它是其父元素的第二个子元素。
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:nth-last-child(n) → 选择每一个

元素是 n 其父项的第 th 个子项，从最后一个子项开始计数。
例如： p:nth-last-child(2){} , 在这种情况下，它选择 para 元素，它是其父元素的第二个子元素，从最后一个子元素开始计数。
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:nth-last-of-type(n) → 选择每一个

第二个元素

其父元素的元素，从最后一个子元素开始计数。
例如：
**p:nth-last-of-type(2){}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

：唯一的孩子 → 选择每个

元素是其父元素的唯一子元素。
例如：
**p:独生子女{}
** — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1804/38193017