css中的选择器(4)

37 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第6天,点击查看活动详情
昨天学习了群组选择器和后代选择器,今天学习选择器的最后一部分。

对html中a标签样式设置的选择器

用于设置网页上经常能够看到的超链接的样式的一种css选择器,可以实现超链接 点击前,鼠标悬停于超链接时,点击时以及点击后超链接的样式。

对超链接样式设置的四种声明:

a:link : 超链接的初始状态(只会改变从来没点击过的超链接)
a:visited : 超链接被访问之后的状态
a:hover : 鼠标悬停(鼠标滑过)超链接时的状态
a:active : 超链接被鼠标选中时的状态
这四个声明可以同时使用也可以单独拿出来使用。在同时使用的时候,必须按照link-visited-hover-active的顺序书写,否则可能会导致样式失效。
举个例子:书写一个点击超链接之前超链接为红色,点击后超链接为黑色,鼠标悬停在超连接时为绿色,鼠标选中超链接不打开时为黄色的超链接。书写格式如下,在码上掘金代码运行效果中无法展示,可以自行编辑html文件在浏览器中运行观察效果。

默认时超链接的样式

超链接文本部分在点击前(link)和鼠标悬停在超链接上(hover)时是蓝色,选中未打开(active)时会变成红色,被访问过之后(visited)会变成紫色。

超链接样式的省略写法

设置超链接访问前后样式相同的时候可以写成a{ : ;} ,设置超链接鼠标悬停时和点击时的样式相同的可以写成a:hover{color:green;}