CSS伪类选择器

CSS的选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器

伪类选择器

伪类选择器:用来描述一个元素的特殊状态!比如第一个元素、某个元素的子元素、鼠标点击的元素

我们伪类选择器有几种,我们来看看第一种

静态伪类: 只能用于超链接的样式

  • :link 超链接点击之前
  • :visited 链接被访问过之后

以上两种样式,只能用于超链接

实际用法还得实际分析,我们来看看这一张图:

这里我写了两个超链接,看我箭头指的文章,你会发现这两个超链接颜色不一样

为什么会不一样呢?

因为第一个链接,是我访问过的网站链接

而第二个链接,我的浏览器没有访问过,系统会默认给访问过与没访问过的超链接显示不同的颜色

我们访问一下试试,看看他会不会变色

 访问过后,第二个超链接的颜色也变成了第一个一样了

那么我们想让没访问过的链接显示其他颜色呢?

这时候就需要我们的伪类选择器上场了,我们在style标签里面用css伪类选择一下

我们使用link来选择没有访问过的超链接

<style>
        a:link{color: aqua;}
</style>

注意,我们的伪类选择器是使用“:”来连接

我们在添加一个超链接,也是没有访问过的网址

我们看看效果

 这里,我们通过伪类选择器的link对没有访问过的网址进行颜色改变

而访问过的链接颜色没有变化

当我们访问之后,他也就不会被link选中了,所以访问过后,是这样的

 到这,有人就问了,访问之前可以被选择,那我想要访问后的链接也变色可不可以呢?

当然可以,事物都有对立一面,编程也一样,可以选择访问之前的超链接,那就肯定可以选择访问之后的超链接

我们写个访问之后的选择,让它变成其他颜色

<style>
        a:link{color: aqua;}
        a:visited{color: chartreuse;}
</style>

下面那个a:visited就是另一个选择属性了,他会选择被访问过的超链接

我们看看被访问过的超链接有没有变色

最后,再补充一点,看看这张图!

 我这里使用一个字体属性,将:visited选择中的字体变大,可是字体并没有改变,这是为什么呢???

因为为了

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小简(JanYork)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值