css伪类

/* 示例代码：使用 :hover 伪类 */

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

/* 解释说明：
在这个示例中，我们使用了 :hover 伪类。当用户将鼠标悬停在链接（<a>标签）上时，链接的颜色会从蓝色变为红色，并且添加下划线。
*/

/* 示例代码：使用 :active 伪类 */

button {
  background-color: gray;
  color: white;
}

button:active {
  background-color: darkgray;
  color: black;
}

/* 解释说明：
在这个示例中，我们使用了 :active 伪类。当用户点击按钮时，按钮的背景颜色会从灰色变为深灰色，文字颜色会从白色变为黑色。
*/

/* 示例代码：使用 :focus 伪类 */

input:focus {
  border: 2px solid blue;
}

/* 解释说明：
在这个示例中，我们使用了 :focus 伪类。当输入框获得焦点（例如用户点击输入框或通过 Tab 键导航到输入框）时，输入框的边框会变成蓝色。
*/

/* 示例代码：使用 :nth-child 伪类 */

ul li:nth-child(odd) {
  background-color: lightgray;
}

/* 解释说明：
在这个示例中，我们使用了 :nth-child 伪类。它会选择 ul 列表中的所有奇数项 (li)，并将其背景颜色设置为浅灰色。
*/