3
伪类选择器_mb62c3ac8538829的技术博客_51CTO博客
source link: https://blog.51cto.com/u_15707781/5639060
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
伪类选择器
精选 原创/*
*作者：呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货，记得关注哦！
*/
*作者：呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货，记得关注哦！
*/
- 伪类选择器
伪类：同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
静态伪类和动态伪类
伪类选择器分为两种。
（1）静态伪类：只能用于超链接的样式。如下：
-
:link超链接点击之前 -
:visited链接被访问过之后
PS：以上两种样式，只能用于超链接。
（2）动态伪类：针对所有标签都适用的样式。如下：
-
:hover “悬停”：鼠标放到标签上的时候 -
:active “激活”：鼠标点击标签，但是不松手时。 -
:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点
超链接a标签
超链接的四种状态
a标签有4种伪类（即对应四种状态），要求背诵。如下：
-
:link “链接”：超链接点击之前 -
:visited “访问过的”：链接被访问过之后 -
:hover “悬停”：鼠标放到标签上的时候 -
:active “激活”：鼠标点击标签，但是不松手时。
对应的代码如下：
/*普通链接状态 ：访问前*/
a:link{
color:red;
}
/*访问过后的状态*/
a:visited{
color:green;
}
/*鼠标经过的状态*/
a:hover{
color:blue;
}
/*激活的状态：鼠标按下但不松手*/
a:active{
color:yellow;
}
a:link{
color:red;
}
/*访问过后的状态*/
a:visited{
color:green;
}
/*鼠标经过的状态*/
a:hover{
color:blue;
}
/*激活的状态：鼠标按下但不松手*/
a:active{
color:yellow;
}
记住，在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是：
a{
color: black;
}
a:hover{
color: green;
}
color: black;
}
a:hover{
color: green;
}
a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：
当然了，在写a:link、a:visited这两个伪类的时候，要么同时写，要么同时不写。如果只写a属性和a:link属性，不规范。
动态伪类举例
我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。
-
:hover “悬停”：鼠标放到标签上的时候 -
:active “激活”：鼠标点击标签，但是不松手时。 -
:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）
/*可以用在所有标签*/
/*获得焦点*/
.uname:focus{
color: red;
}
/*鼠标经过*/
.product:hover{
color: red;
border:1px solid red;
}
/*激活状态 鼠标按下去 没有松手的时候*/
.span1:active{
color: red;
background-color: blue;
}
/*获得焦点*/
.uname:focus{
color: red;
}
/*鼠标经过*/
.product:hover{
color: red;
border:1px solid red;
}
/*激活状态 鼠标按下去 没有松手的时候*/
.span1:active{
color: red;
background-color: blue;
}
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK