首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

每天一点前端知识,轻松学会前端开发——理解CSS伪类

小编希望童靴们能够从基础阶段到进阶阶段一步步跟我走下去,相信你一定会有收获的。

小编相信,爱学习的孩子运气都不会差的。

关注小白前端,持续收到文章推送。

CSS伪类

css伪类就是向选择器添加一些特殊的效果。

selector : pseudo-class

当然,CSS类也可以搭配伪类使用。

selector .class : pseudo-class

锚伪类

我们今天要讲的是锚伪类。链接中有几个状态分别是活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移到链接上

a:active 选定的链接

我们写一个a元素:

a标签中的文本有一个默认颜色,如图:

然后给它应用这四种伪类,链接为访问的时候是文本是蓝色(其实可以说设置默认的状态),链接访问过文本是红色,鼠标移到链接上是绿色,鼠标点击状态是灰色。

我们在浏览器中查看,

未访问状态:

未访问状态

访问状态:

访问状态

鼠标移入状态:

鼠标移入状态

鼠标点击状态:

鼠标点击状态

鼠标点击的瞬间会跳的链接页面,所以看不清楚效果可以长按鼠标。

童靴们打开编辑器练习一下吧!

爱学习的孩子运气不会差哦~

零基础小白到大神之路,欢迎加裙 六二三九六六八零六,群里有免费web前端课程,还有大量干货哦

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171214A05ACB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券