CSS伪类是CSS的一种强大功能,用于在页面元素的不同状态下应用样式。伪类允许开发人员选择元素在不同状态下的不同样式,这些状态可能包括焦点,悬停,活动状态或访问状态。
/* :hover伪类示例 */ a:hover { color: red; text-decoration: underline; cursor: pointer; } /* :active伪类示例 */ a:active { color: green; } /* :visited伪类示例 */ a:visited { color: blue; }
在上面的示例中,:hover
在链接悬停时应用红色文字和下划线,:active
当链接被点击时为绿色,而:visited
当用户访问过链接时为蓝色。
伪类也可以与其他选择器结合使用,例如:nth-child
伪类,用于选择父元素的特定子元素。
/* :nth-child伪类示例 */ li:nth-child(odd) { background-color: #eee; } li:nth-child(even) { background-color: #fff; }
在上面的示例中,:nth-child
伪类选择列表项(li
元素),并使用偶数和奇数值的背景颜色对其进行“条纹化”。
总的来说,CSS伪类为我们提供了一种更加灵活的方式来应用样式,使页面元素以一种动态和有意义的方式呈现,从而为用户提供更好的体验。