css 伪类

/* 示例代码：使用 :hover 伪类 */
a:hover {
  color: red;
}

/* 解释说明：
:hover 是一个 CSS 伪类，用于选择用户悬停在元素上的状态。在这个例子中，当用户将鼠标悬停在链接 (a 元素) 上时，链接的文字颜色会变为红色。
*/

/* 示例代码：使用 :active 伪类 */
a:active {
  background-color: yellow;
}

/* 解释说明：
:active 是一个 CSS 伪类，用于选择用户激活（点击）元素的状态。在这个例子中，当用户点击链接 (a 元素) 时，链接的背景颜色会变为黄色。
*/

/* 示例代码：使用 :focus 伪类 */
input:focus {
  border: 2px solid blue;
}

/* 解释说明：
:focus 是一个 CSS 伪类，用于选择获得焦点的元素。在这个例子中，当用户点击或通过 Tab 键导航到输入框 (input 元素) 时，输入框的边框会变为蓝色且宽度为 2 像素。
*/

/* 示例代码：使用 :nth-child 伪类 */
li:nth-child(odd) {
  background-color: lightgray;
}

/* 解释说明：
:nth-child(n) 是一个 CSS 伪类，用于选择父元素中的第 n 个子元素。在这个例子中，所有 li 元素中奇数位置的项会被赋予浅灰色背景。
*/