a:visited { color: blue; } a:active { color: red; } a:focus { outline: 2px solid orange; }
三个伪类分别是:
- :visited表示被访问过的链接
- :active表示正在被点击的链接
- :focus表示当前链接被选中
其中,被访问过的链接状态的颜色可以通过color属性来设置。例如上面代码片段中,将选中状态的颜色设置为蓝色。
而被点击状态的颜色,同样可以通过color属性来设置。例如上面代码片段中,将点击状态的颜色设置为红色。
对于选中状态,由于不同的浏览器对选中状态的表现方式不同,因此大家需要使用outline属性来设置选中状态的样式。outline可以设置选中状态的边框,大多数浏览器会自动将选中状态的边框颜色设为浏览器主题颜色,而使用outline就可以不受影响的设置。上面代码片段中,将选中状态的outline颜色设置为橙色,边框宽度为2px。
在实际开发中,根据页面主题选择适合的颜色是很重要的。通过CSS的灵活运用,可以为用户带来更好的体验。