深入了解CSS中的UI伪类

本文主要介绍了CSS中UI伪类的深入理解，这是CSS入门学习的基础知识。
伪类（伪类）是选择器的螺栓，用于指定一个或与其相关的选择器的状态。它们是选择器的形式：伪类{属性：}；只使用半个英文冒号（：）分隔选择器和伪类。

伪类可以分为两类：

当HTML元素处于状态时（如鼠标），UI（用户界面、用户界面）伪类将处于一种状态。
指针位于链接上）以便为元素应用CSS样式。

结构化的伪类在标记中会有一些结构关系，如元素是元素组中的第一个元素。
一个或最后一个），为相应的元素应用CSS样式。

UI伪类
链接伪类

有4个伪类用于链接，因为链接总是在以下4个状态中的一个。

链接
参观
悬停
主动

提示：由于4个伪类具有相同的特殊性，如果它们不在这里列出的顺序中使用，浏览器可能不会显示预期效果！大写字母是每个木偶类的第一个字母。

提示：冒号（：）表示一个伪类，和两个冒号（：：）代表CSS3的新要素。

焦点伪类

表单中的文本字段在用户单击时获得焦点，然后用户可以在其中输入该字符。
例如，输入：焦点{ border: 1px solid蓝；}
当光标位于输入字段时，上述行将向字段添加一个蓝色边框。这允许用户准确地知道输入字符的位置。
目标伪类

如果用户单击指向页面中其他元素的链接，则该元素是目标。
使用：目标伪类来选择它。
例如：对于这个链接：更多信息
该页的其他部分，我是more_info元素，是目标。
假设这个元素是这样的：这就是您要查找的信息。
所以，CSS规则：# more_info：目标{背景：# EEE }
灰色背景添加到元素，当用户点击链接的ID more_info元素。

维基百科在其引用中广泛使用了：目标伪类。维基百科引用了正文中的链接。
不显眼的数字链接。引用本身位于长页面的底部。如果没有：目标应用程序
很难知道你点击的链接中的一堆引文是哪一个。

结构性伪类

结构化伪类可以根据标记结构使用，例如基于元素的父元素或前同胞元素。
第一个孩子和最后一个孩子

格式:
CSS代码将内容复制到剪贴板。
E：第一个孩子
E：最后一个孩子

实例：

CSS代码将内容复制到剪贴板。
ol.results李：第一个孩子{颜色：蓝色；}
n孩子

格式:

CSS代码将内容复制到剪贴板。
E：n个子（n）

实例：

CSS代码将内容复制到剪贴板。
李：第N个孩子（3）

描述：E表示元素名，n表示值（也可以使用奇数或偶数）。