27.CSS 伪类是什么? & 屏幕外

CSS 伪类是什么?

CSS 伪类提供了一种根据元素状态的变化来设置样式的方法。例如,:hover 可用于在用户的指针悬停在元素上时应用额外的样式。

伪类让你可以根据文档树的内容(例如 :first-child)、外部因素如导航器的历史记录(例如 :visited)、内容的状态(例如 :checked)或鼠标的位置(例如 :hover)来对元素应用样式。

常用的伪类

以下是 5 个最常用的伪类及其用法列表。这个列表绝不是完整的。你应该始终参考权威来源的相关文档,如 MDN,以获取更多信息。

• :hover、:focus 和 :active 用于提供用户交互反馈(例如在悬停时改变按钮的颜色)
• :link 和 :visited 对于根据导航历史记录设置链接样式很有用(例如改变已访问链接的颜色)
• :first-child、:last-child、:nth-child() 和 nth-last-child() 在处理元素集合时很有用
• :not() 用于匹配除给定选择器之外的所有内容,在设置难以选择的元素的样式时很有用
• :lang() 允许你根据文档的语言应用特殊样式,对多语言网站很有用

这些只是 CSS 提供的众多伪类中的一小部分。伪类是 CSS 中一个非常强大和有用的功能,它允许你根据元素的状态、位置或与其他元素的关系来设置样式,而无需使用 JavaScript 或修改你的 HTML。

以下是一些关于有效使用伪类的提示:

1. 使用 :hover、:focus