CSS操纵连接显示信息情况的CSS伪类

2021-03-08 06:02 jianzhan

CSS操纵元素的某种情况---伪类(用于向一些挑选器加上独特的实际效果)
伪类的英语的语法:元素标识 伪类名字{特性:特性值;}
a:link:未浏览的连接
a:hover:电脑鼠标挪动到连接上
a:active:电脑鼠标按下连接
a:visited:已浏览的连接

假如在点一下之后再回到到该网页页面也有1些实际效果的话 就依照该次序给连接加上情况 L V H A

自定连接的CSS类:
a.类名字:情况(即挑选符.类名字:伪类名字{特性:特性值})

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>CSS操纵连接—CSS伪类</title>
<style type="text/css">
a:link{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#6F0;}
a:hover{text-decoration:underline; color:#00F;}
a:active{text-decoration:overline; color:#F00;}
a.web:visited{text-decoration:none; color:#000;}
</style>
</head>
<body>
<div id="link">
<a href="http://www.baidu.com" class="web">网页页面设计方案</a> |
<a href="http://www.baidu.com">平面设计方案</a> |
<a href="http://www.baidu.com">网站前端开发</a> |
<a href="http://www.baidu.com">动漫设计方案</a> |
<a href="http://www.baidu.com">手机软件开发设计</a> |
<a href="http://www.baidu.com">网页页面营销推广</a>
<a href="http://www.baidu.com">我会闪</a>
</div>
</body>
</html>

:focus{特性:特性值}设定目标在变成键入聚焦点时的款式(IE6/7不适用)

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>CSS操纵连接—CSS伪类</title>
<style type="text/css">
input{
width:200px;
height:25px;
border:2px solid #FF0;
}
input:focus{
background:#9FF;
}
</style>
</head>
<body>
<label>客户名: <input type="text" name="username"/></label>
<label>密 码: <input type="text" name="pwd"/></label>
</body>
</html>