您的位置：首页 > Web前端

从零开始前端学习[13]:伪类选择器

2017-09-20 23:04 701 查看

伪类选择器

link伪类选择器

visited伪类选择器

hover伪类选择器

active伪类选择器

before伪类选择器

after伪类选择器

提示：

博客:章飞_906285288

博客地址:http://blog.csdn.net/qq_29924041

什么是伪类？？

css的伪类就是用于对标签添加一些特殊效果的类，伪类一般使用”:”来进行引用，伪类的种类有很多，在这里主要先介绍一些常用的几种伪类

link伪类选择器

link表示链接的意思，在这里表示为访问的链接，

:link  匹配所有未被点击的链接
如: a:link{color:green;}
表示a的字体为绿色


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
a:link{color:deeppink;text-decoration: underline}
</style>
</head>
<body>
<a href="http://www.baidu.com">这是一个通向百度的链接</a>
</body>
</html>


显示效果如下；未点击的状态



visited伪类选择器

visited是可视化的意思，在css中表示匹配所有已经被点击的链接

:visited 匹配所有已经被点击的链接
如:a:visited{color:red;}
表示点击过后的链接为红色


hover伪类选择器(最常用)

hover伪类选择器，匹配了鼠标悬停在其上的元素，有时候我们会使用其做一些效果

:hover 匹配鼠标悬停在其上的元素
a:hover{color:gold;}; /*鼠标悬停在上面的时候颜色发生变化*/
div:hover p{width:30px;height:30px;color:blue;}/*表示当鼠标悬停在div上的时候，div中的p发生属性变化*/


在上述的案例上面增加一个visited属性，

a:visited{color: blue}


hover伪类选择器算是在我们使用过程最最重要的，重点讲解

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 30px auto;border: 1px solid green}
p{width: 30px;height: 30px;background: greenyellow;line-height: 30px;text-align: center}
.p1:hover{background: red}
.main div:hover .p2{ background: blue}
</style>
</head>
<body>
<div class="main">
<p class="p1">p1</p>
<div>
<p class="p2">p2</p>
</div>
</div>
</body>
</html>


显示效果：



active 匹配鼠标按下还没有释放的是元素

active表示的是当鼠标点击后，但是鼠标没有松，这个时候颜色发生的变化

:active 匹配鼠标按下还没有释放的元素
a:active{color:blue;}


before 在元素内容前面插入内容

before伪类选择器，顾明思议，也就是在标签元素前面添加一个内容，内容使用content”“表示

div:before{display:inline-block;content:"";height:30px;width:30px;background:blue}
在div前面添加一个元素，属性如上所示


注意:无论你content里面要不要写内容都不能省略content

after 在元素内容后面插入内容

与before相反的是，在元素后面去添加一个内容，使用after，内容区域使用content表示

div:after{display:inline-block;content:"";height:30px;width:30px;background:blue}
在div前面添加一个元素，属性如上所示


注意:无论你content里面要不要写内容都不能省略content

统一说明下after和before伪类选择器的使用：，注意这里说的是盒子内容前面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin:40px auto;border: 1px solid red;}
.main .content{width: 300px;height: 30px;background: deeppink}
.main .content:before{
display: inline-block;
content: "before";
width: 70px;
height: 30px;
background: red;
text-align: center;
line-height: 30px;
}
.main .content:after{
display: inline-block;
content: "after";
width: 70px;
height: 30px;
background: blue;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
content
</div>
</div>
</body>
</html>


显示的效果如下所示:



需要注意的是:

- 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的

- 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

- 伪类名称对大小写不敏感。

欢迎持续访问博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  伪类选择器 hover before after link
相关文章推荐
新的分享
章节导航