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。
以下是一些关于有效使用伪类的提示:
-
使用
:hover
、:focus