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 伪类,它们可以帮助开发者根据元素的状态或位置来选择应用样式。
标签:方式,伪类,color,元素,选择,样式,child,列举 From: https://www.cnblogs.com/coversky/p/17658036.html