根据状态确定样式
在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。当我们修改一个链接的样式时我们需要定位(针对) (锚)标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的,亦或是正在被点击当中的状态,这个标签有着不同的状态。你可以使用 CSS 去定位或者说针对这些不同的状态进行修饰——下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。
cssa:link {
color: pink;
}
a:visited {
color: green;
}
你可以改变链接被鼠标悬停的时候的样式,例如移除下划线,下面的代码就实现了这个功能。
cssa:hover {
text-decoration: none;
}
在下面的例子中,你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则,然而你肯定已经发现粉色看上去太浅以至于不好辨认。——换一个更好的颜色吧。你能将链接变为黑体吗?
我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线。但需要注意的是,对一个实际的站点,需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的,最好保留 link 状态下的下划线。— 这是下划线的本来作用。不管你用 CSS 来做什么,都应当使得变化后的文档看上去更加清晰明了。— 在后面,当我们遇到类似的情况时,我们将适时指出。
备注:
在本教程以及整个 MDN 站点中,你会经常看到“无障碍”这个词。“无障碍”一词的意思是,我们的网页应当让每一个访客都能够理解、使用。
你的访客可能在一台使用鼠标和键盘操作的计算机前,也可能正在使用带有触摸屏的手机,或者正在使用屏幕阅读软件读出文档内容,或者他们需要使用更大的字体,或者仅仅使用键盘浏览站点。
一个朴素的 HTML 文档一般来说对任何人都是可以无障碍访问的,当你开始为它添加样式,记得不要破坏这种无障碍。