CSS 伪类学习笔记

什么是伪类？

伪类是 CSS 中的一种关键字，表示选取 HTML 元素的一个特定状态。它们以冒号 : 开头，被添加到选择器的末尾。

伪类的语法

伪类通常写在选择器的末尾，如下所示：

cssCopy Code
selector:pseudo-class {
  property: value;
}

常用的伪类

以下是常见的一些伪类：

• :hover：表示鼠标悬停在元素上时的状态。
• :active：表示元素被点击时的状态。
• :focus：表示元素获得焦点时的状态。
• :visited：表示已经访问过的链接。
• :nth-child()：表示选取第 n 个子元素。
• :first-child：表示选取第一个子元素。
• :last-child：表示选取最后一个子元素。

实例

以下是一些使用伪类的实例：

:hover

cssCopy Code
button:hover {
  background-color: red;
}

当鼠标悬停在按钮上时，按钮的背景颜色将变为红色。

:active

cssCopy Code
button:active {
  background-color: blue;
}

当按钮被点击时，按钮的背景颜色将变为蓝色。

:visited

cssCopy Code
a:visited {
  color: purple;
}

已访问过的链接的颜色将变为紫色。

:nth-child()

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

选取所有奇数项的背景颜色将变为浅灰色。

:first-child

cssCopy Code
li:first-child {
  font-weight: bold;
}

第一个列表项将显示为粗体。

:last-child

cssCopy Code
li:last-child {
  text-decoration: underline;
}

最后一个列表项的文本将显示为下划线。