入门 CSS 状态

什么是 CSS 状态

CSS 状态（CSS Pseudo-classes）是应用于选择器的关键字，用于选择特定状态的元素。CSS 状态使得我们能够向链接，按钮，空闲状态等元素应用样式，而不用使用 JavaScript 来为这些元素添加事件处理程序。

常用的 CSS 状态

:hover

该状态用于当鼠标悬停在元素上时应用的样式。

a:hover {
  color: red;
}

:active

该状态用于当元素被激活时应用的样式，例如当用户单击鼠标时。

button:active {
  background-color: yellow;
}

:focus

该状态用于当元素获得焦点时应用的样式，例如表单元素中的输入框。

input:focus {
  border-color: blue;
}

:visited

该状态用于为已访问的链接应用样式。

a:visited {
  color: purple;
}

:first-child

该状态用于匹配作为其父级的第一个子元素的元素。

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

:last-child

该状态用于匹配作为其父级的最后一个子元素的元素。

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

如何使用 CSS 状态

要使用 CSS 状态，只需在选择器后面添加状态声明即可。

a:hover {
  color: red;
}

button:active {
  background-color: yellow;
}

input:focus {
  border-color: blue;
}

a:visited {
  color: purple;
}

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

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

结论

CSS 状态使我们能够应用用于特定状态的样式，而不必使用 Javascript 来实现。常用的 CSS 状态包括：hover，active，focus，visited，first-child 和 last-child。