开启掘金成长之旅!这是我参与「掘金日新计划 · 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;}
。