css基础选择器中伪类选择器

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

一、伪类选择器

作用：根据某一元素不同的状态来进行样式声明

语法:

选择器:伪类{}

伪类分类:

1、链接伪类

:link,适用于尚未访问的链接

:visited,访问过后的链接

<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<style>
a:link{
color:red;
text-decoration:none;
font-size:20px;
}
a:visited{ color:black;

复制代码

2、动态伪类

:hover,适用于鼠标悬停在元素时

<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<style>
a:hover{
color:red;
text-decoration:none;
font-size:20px;
}
</style>
</head>
<body>
<div>
<a href="#">鼠标未悬停的链接</a>
</div>
</body></html>

复制代码

:active,元素被激活时

<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<style>
a:active{
color:green;
text-decoration:none;
font-size:20px;
}
</style>
</head>
<body>
<div>
<a href="#">未激活的链接</a>
</div>
</body></html>

复制代码

:focus,元素获取焦点时（多数用于文本框，密码框等表单元素）

<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<style>
.txt{
color:red;
font-size:16px;
}
.txt:focus{
color:green;
font-size:25px;
}
</style>
</head>
<body>
<div>
<input class="txt" type="text" value="用户名"><br/><br/>
<input class="txt" type="text" value="地址">
</div>
</body></html>

复制代码

3、目标伪类(target)

用于匹配当前活动的锚点元素

语法：:target

<!DOCTYPE html>
<html>
<head>
<title> 目标伪类 </title>
<meta charset="utf-8" />
<style>
.empty{
width:200px;
height:50px;
border:1px solid red;
}
a:target{
background:red;
}
div:target{
background:gray;
}
</style>
</head>
<body>
<p><a href="#China">跳转至中国</a></p>
<p><a href="#America">跳转至美国</a></p>
<p><a href="#Japan">跳转至日本</a></p>
<a name="China">中国:地大物博!</a>
<div class="empty"></div>
<a name="America">美国:到处欺负人!</a>
<div class="empty"></div>
<div id="Japan">日本:岛国！</div> </body>

复制代码

4、元素状态伪类

应用场合：表单元素居多

                  :enable 匹配每个已启用的元素(大多数应用在表单元素上)
                  :disable 匹配每个被禁用的元素(大多数应用在表单元素上)
                  :checked 匹配每个已被选中的input元素(只用于单选按钮和复选框)