在CSS中,伪类是一种可以在选择器中添加的特殊关键词,它允许我们选择文档中不同状态或特殊元素。它们通常以冒号(:)开头,放置在选择器的末尾。
/* 例如,想要选择第一个段落元素,可以使用伪类:first-child*/ p:first-child { color: red; }
以下是常见的几种伪类及其用途:
:hover
:hover伪类用于当鼠标悬停在元素上时改变其样式。例如,当鼠标悬停在链接上时,可以改变其文本颜色。
/* 改变链接文本颜色 */ a:hover { color: blue; }
:active
:active伪类用于当元素处于激活状态(即按下按钮时)时改变其样式。例如,当用户单击按钮时,可以改变其背景颜色。
/* 改变按钮背景颜色 */ button:active { background-color: green; }
:nth-child
:nth-child伪类允许选择文档中的特定元素。可以使用an+b公式来选择元素,例如:nth-child(2n+1)选择所有奇数元素。
/* 选择所有偶数行背景颜色 */ tr:nth-child(2n) { background-color: lightgray; }
:first-child
:first-child伪类用于选择第一个子元素。例如,可以使用:first-child选择第一个段落元素。
/* 选择第一个段落元素 */ p:first-child { font-weight: bold; }
这些常见的伪类只是CSS中可用的许多伪类之一。了解和掌握伪类对于创建复杂和个性化的CSS样式非常重要。