css伪类选择器

什么是伪类选择器?

伪类选择器用来表示元素的一种特殊样式。
比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框。
当我们需要为处于这些特殊状态的元素设置状态时,就可以使用伪类。

伪类链接:link和visited

link:为没有访问过的链接设置一个颜色为红色需要用到伪类选择器a:link{}。link普通链接的意思。
visited:为访问过的链接设置一个颜色为红色需要用a:visited{}。visited表示访问过的链接。因为隐私问题在大多浏览器里面只能设置颜色。

如下所示:

<style type="text/css">
a:link{color: yellowgreen;}
a:visited{color: red;}

</style>
</head>
<body>

<a href="http://www.baidu.com">我是一个超链接</a>
<a href="http://www.baidu123456.com">我是一个超链接</a>

</body>
</html>

访问过的链接会显示红色没有访问过的则为绿色。

伪类链接:hover

hover表示鼠标移入链接时,链接所表示的状态!

如下所示:

<style type="text/css">
a:link{color: yellowgreen;}
a:visited{color: red;}
a:hover{color: skyblue;}
</style>
</head>
<body>

<a href="http://www.baidu.com">我是一个超链接</a>
<a href="http://www.baidu123456.com">我是一个超链接</a>

</body>

鼠标放第一个上去链接,链接就成蓝色!

伪类链接:active

active表示链接被点击的状态

如下所示

<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{color: yellowgreen;}
a:visited{color: red;}
a:hover{color: skyblue;}
a:active{color: black;}
</style>
</head>
<body>

<a href="http://www.baidu.com">我是一个超链接</a>
<a href="http://www.baidu123456.com">我是一个超链接</a>

</body>
</html>

鼠标点击到第一个链接上面,链接就会变成黑色。

伪类链接:focus

focus获取焦点以后,修改背景颜色为黄色

如下所示

<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{color: yellowgreen;}
a:visited{color: red;}
a:hover{color: skyblue;}
a:active{color: black;}
input:focus{background-color: yellow;}
</style>
</head>
<body>

<a href="http://www.baidu.com">我是一个超链接</a>
<a href="http://www.baidu123456.com">我是一个超链接</a>
<input type="text" name="">

</body>

伪类链接::selection

::selection为p标签中选中的内容使用样式

如下所示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{color: yellowgreen;}
a:visited{color: red;}
a:hover{color: skyblue;}
a:active{color: black;}
input:focus{background-color: yellow;}
p::selection{background-color: yellow;}
</style>
</head>
<body>

<a href="http://www.baidu.com">我是一个超链接</a>
<a href="http://www.baidu123456.com">我是一个超链接</a>
<input type="text" name="">
<p>为p标签中选中的内容使用样式</p>

</body>
</html>

被选中的p标签背景颜色为黄色

上面一些就是经常遇到的一些伪类标签!

 

 

posted @ 2019-08-06 23:37  牛耀民  阅读(272)  评论(1编辑  收藏  举报