CSS 伪类(Pseudo-classes)

在 CSS 中，伪类是用来向选择器添加特殊的状态的关键词。伪类常用于选择元素的特定状态或位置，比如鼠标悬停、被点击、被选中等。

常用的伪类

:hover

:hover 伪类用于选择鼠标悬停在元素上的状态。当鼠标悬停在一个元素上时，可以为该元素添加特殊的样式。

a:hover {
  color: red;
}

:active

:active 伪类用于选择被激活的元素，通常是用户点击元素时的状态。可以用来为按钮等元素添加点击效果。

button:active {
  background-color: #f0f0f0;
}

:focus

:focus 伪类用于选择当前获得焦点的元素，通常是用户通过键盘或鼠标聚焦到输入框等元素时的状态。

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

:first-child

:first-child 伪类用于选择父元素的第一个子元素。可以用来为列表的第一个元素添加特殊样式。

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

:last-child

:last-child 伪类用于选择父元素的最后一个子元素。可以用来为列表的最后一个元素添加特殊样式。

li:last-child {
  color: #333;
}

:nth-child()

:nth-child() 伪类用于选择父元素的指定位置的子元素。可以通过公式来选择特定位置的子元素，如 :nth-child(odd) 选择奇数位置的子元素。

li:nth-child(odd) {
  background-color: #f0f0f0;
}

总结

伪类是 CSS 中非常重要的一部分，通过伪类可以为元素添加各种状态下的样式，使页面更加交互和美观。熟练掌握伪类的使用可以帮助我们更好地控制页面元素的样式和行为。