伪类是CSS中非常重要的概念,它可以为元素添加一些特殊的样式,通过模拟元素的状态或位置来实现。下面是一些常用的CSS伪类样式。
/* :hover,鼠标悬停状态 */ a:hover { color: red; text-decoration: underline; } /* :active,鼠标点击状态 */ a:active { color: green; } /* :visited,访问过的链接样式 */ a:visited { color: purple; } /* :focus,得到焦点状态,如input */ input:focus { border-color: blue; } /* :first-child,选中第一个子元素 */ ul li:first-child { font-weight: bold; } /* :last-child,选中最后一个子元素 */ ul li:last-child { font-style: italic; } /* :nth-child(n),选中第n个子元素 */ ul li:nth-child(2) { text-transform: uppercase; }
通过使用伪类样式,可以为元素添加更多的个性化样式,使页面更加美观和符合用户期望。