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

来源：互联网发布：c语言 char 编辑：程序博客网时间：2024/06/15 12:13

伪类选择器

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 之后，才是有效的。
- 伪类名称对大小写不敏感。

欢迎持续访问博客

阅读全文

1 0