打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
css的伪类选择器

伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“伪类”。

静态伪类和动态伪类
伪类选择器分为两种。

(1)静态伪类:只能用于超链接的样式。如下:

:link 超链接点击之前
:visited 链接被访问过之后
PS:以上两种样式,只能用于超链接。

(2)动态伪类:针对所有标签都适用的样式。如下:

:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签,但是不松手时。
:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)
PS:以上三种样式,只能用于超链接。

超链接a标签
超链接的四种状态
a标签有4种伪类(即对应四种状态),要求背诵。如下:

:link “链接”:超链接点击之前
:visited “访问过的”:链接被访问过之后
:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签,但是不松手时。
对应的代码如下:(不带注释)
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
对应的代码如下:(带注释)
/让超链接点击之前是红色/
a:link{
color:red;
}

/让超链接点击之后是绿色/
a:visited{
color:orange;
}
/鼠标悬停,放到标签上的时候/
a:hover{
color:green;
}
/鼠标点击链接,但是不松手的时候/
a:active{
color:black;

2人点赞

日记本

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
CSS :hover 选择器
a标签超链接颜色改变
CSS复合选择器
【CSS】CSS选择器优先级及!important属性
关于CSS优先级算法是如何计算?
html 鼠标悬停特效
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服