订阅博客
收藏博客
微博分享
QQ空间分享

html入门之css伪类

频道:前端 标签:css 时间:2019年07月10日 浏览:76次 评论:12条
作者: 三只松果

CSS伪类

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


伪类分为静态伪类和动态伪类: 静态伪类只能应用于超链接的样式。如::link :visited 

动态伪类针对所有标签都适用的样式。如::hover :active :focus 


:link 伪类将应用于未被访问过的链接。IE6不兼容,解决此问题,直接使

用a标签。 

:hover 伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连 接,IE7+所有元素都兼容。

:active 伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。 :visited
伪类将应用于已经被访问过的链接
:focus 伪类将引用于有键盘焦点的元素


超链接的四种状态

a标签有4种伪类(即对应四种状态)。如下:
:link “链接”:超链接点击之前
:visited “访问过的”:链接被访问过之后
:hover “悬停”:鼠标放到标签上的时候

:active “激活”: 鼠标点击标签,但是不松手时。

对应的代码如下:

a:link{
color:red;

						
}
a:visited{

						
color:orange;
}

						
a:hover{
color:green;

						
}
a:active{

						
color:black;
}


a{}和a:link{}的区别:

1、a{}定义的样式针对所有的超链接(包括锚点) 2、a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点) 在写a:link、a:visited这两个伪类的时候,要么同时写,要么同时不

写。如果只写a属性和a:link属性,不规范。


练习代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
a:link{
background-color: #FFA500;
color:white

}
a:visited{
background-color: #FFA500;
color: orangered;
}
a:hover{
color: white;
background-color: red;
}
a:active{
color: blue;
text-decoration: underline;
}
a{
font-weight:900;
line-height: 30px;
margin-top: 4px;
text-decoration: none;
display: inline-block;
width: 60px;
height: 30px;
font-weight: 900;
border: 1px #FFA500 solid;
border-radius: 10%;
background-color: white;
}
.nav{

line-height: 40px;
height: 40px;
width: 300px;

border-radius: 5%;
text-align: center;
}

#text:focus{
border: 3px red solid;
color: #008000;
}


</style>
</head>
<body>

<div>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://www.qq.com">腾讯</a>
</div>
<br>
<input type="text" name="" id="text" value="1313" />
<br><br>


</body>
</html>


效果展示:


image.png

文章评论

  • 三只松果
    2019-07-10 22:04:36 回复该评论
    伪类:同一个标签,根据其不同的状态,有不同的样式。这就叫做 “伪类”。伪类用冒号来表示。

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。