css 伪类有哪些

前言

在CSS中，伪类是一种用于选择DOM元素的特殊选择器。伪类在选择器的末尾使用冒号(:)表示，用于匹配特定的状态或条件的元素。在本文中，我将介绍一些常见的CSS伪类，包括其用途和规范。

1. 链接伪类

链接伪类用于选择不同状态下的链接。常见的链接伪类有：

a:link {
  /* 未访问过的链接样式 */
}

a:visited {
  /* 已访问过的链接样式 */
}

a:hover {
  /* 当鼠标悬停在链接上时的样式 */
}

a:active {
  /* 链接被点击时的样式 */
}

2. 运行状态伪类

运行状态伪类用于选择表单元素的不同状态。常见的运行状态伪类有：

input:focus {
  /* 当表单元素获得焦点时的样式 */
}

input:disabled {
  /* 当表单元素被禁用时的样式 */
}

input:checked {
  /* 当单选框或复选框被选中时的样式 */
}

3. 结构伪类

结构伪类用于选择文档树中的元素，根据它们的位置和关系进行选择。常见的结构伪类有：

:first-child {
  /* 选择父元素下的第一个子元素 */
}

:last-child {
  /* 选择父元素下的最后一个子元素 */
}

:nth-child(n) {
  /* 选择父元素下的第n个子元素 */
}

:nth-last-child(n) {
  /* 同上，从最后一个子元素开始计数 */
}

:first-of-type {
  /* 选择父元素下的第一个特定类型的子元素 */
}

:last-of-type {
  /* 选择父元素下的最后一个特定类型的子元素 */
}

:nth-of-type(n) {
  /* 选择父元素下的第n个特定类型的子元素 */
}

总结

这些只是CSS伪类的一些常见示例，它们可以让我们更灵活地选择和样式化DOM元素。通过使用不同的伪类，我们可以根据元素的状态、结构和运行状态来添加特定的样式。理解并熟练运用CSS伪类对于设计和开发网页来说至关重要。