列举出所有的伪类使用方式

CSS 伪类(Pseudo-classes)是用于选择元素在特定状态下的样式的一种机制。它们通过在选择器后面使用冒号 ":" 来表示,并与普通的元素选择器结合使用。

以下是一些常见的 CSS 伪类及其功能:

1. :hover:当鼠标悬停在元素上时应用的样式。
a:hover {
color: red;
}

2. :active:当元素被激活(被点击)时应用的样式。

button:active {
background-color: gray;
}

3. :focus:当元素获得焦点时应用的样式,通常用于表单元素。

input:focus {
border-color: blue;
}

4. :visited:选择用户已访问过的链接的样式。

a:visited {
color: purple;
}

5. :nth-child():根据位置选择父元素的子元素。例如,选择第二个子元素。

li:nth-child(2) {
color: blue;
}

6. :first-child:选择父元素下的第一个子元素。

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

7. :last-child:选择父元素下的最后一个子元素。

div:last-child {
border: 1px solid black;
}

8. :not():选择不匹配提供的选择器的元素。

p:not(.special) {
color: gray;
}

9. :checked:选择被选中的复选框或单选按钮。

input[type="checkbox"]:checked {
background-color: yellow;
}

这只是一小部分常见的 CSS 伪类,它们可以帮助开发者根据元素的状态或位置来选择应用样式。

posted @ 2023-08-25 21:51  颜小雀  阅读(39)  评论(0编辑  收藏  举报