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;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近写一些前端网页时,不想用jQuery,js等就想实现一些鼠标事件触发不同的样式。因此我们可以使用CSS自带的伪...
    默写_0c03阅读 470评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,596评论 1 45
  • :hover{}为什么要在下面? a连接常用的伪类选择器有四种,根据CSS文档的推荐,这四个选择器最好按如下方式排...
    朱小维阅读 1,181评论 0 0
  • 1. class 和 id 的使用场景: id:id选择器,使用#name定义(name为id名,可任意取名),使...
    石林涛阅读 385评论 0 1
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,397评论 1 62