CSS伪类是用于选择HTML元素的特定状态或类型的特殊类。它们允许开发者为特定状态(如鼠标悬停、焦点、活动等)的元素应用样式。以下是CSS伪类的一些常见示例和描述:
1. :hover:此伪类用于选择鼠标悬停在其上的元素。例如,您可以使用它来更改鼠标悬停在链接上时的颜色或背景。
css
a:hover {
color: red;
}
2. :active:此伪类用于选择被用户激活(例如,点击并按下)的元素。它常用于定义按钮点击时的样式。
css
button:active {
background-color: green;
}
3. :focus:此伪类用于选择获得焦点的元素,如输入框或按钮。当用户与该元素交互时,可以使用此伪类来更改其样式。
css
input:focus {
border-color: blue;
}
4. :first-child 和:last-child:这些伪类用于选择其父元素的第一个或最后一个子元素。例如,您可以使用它们来为列表项或段落等元素添加特定的样式。
css
p:first-child {
font-weight: bold;
}
5. :nth-child():这是一个更复杂的伪类,允许您根据其父元素的子元素顺序来选择元素。例如,您可以选择每个列表的第二个元素并将其设置为不同的颜色。
css
li:nth-child(2) {
color: orange;
}
6. :not():此伪类用于选择不符合其他特定选择器的元素。它是一个强大的工具,可用于为特定类型的非匹配项应用样式。
css
p:not(.ignore) {
color: black; /* 除了 class 为 'ignore' 的 p 元素外的所有 p 元素 */
}
7. :link和 :visited:这些伪类用于选择未访问和已访问的链接。您可以为这两种状态定义不同的样式。
这只是CSS伪类的一部分,还有更多可以使用的伪类,如:before、:after等,这些通常与内容伪元素一起使用,为元素的内部部分(如内容之前或之后的伪元素)应用样式。CSS伪类提供了灵活的方式来根据元素的特定状态和交互方式应用样式,从而创建丰富和动态的网页界面。