#07你认真学了css？伪类和伪元素
2018-08-09 本文已影响18人
饥人谷_远方
文档阅读：
总结伪类与伪元素 | AlloyTeamwww.alloyteam.com!
前文回顾：
一、伪类：
1、定义
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化
2、类型
image
3、应用场景
用伪类元素进行效果展示
（1）link visited hover active 顺序
/* 未访问的链接 */
a:link{ color: blue; }
a:visited{ color: green; }
/* 点击后鼠标脱离，获得焦点的链接 */
a:focus{ color: grey; }
/*鼠标悬停时，内容颜色获得红色 */
a:hover{ color: red; }
/*选择活动链接*/
a:active{ color: pink; }
image
（2）first-child VS first-of-type
-
h1:first-child:选择是h1并且它是长子的元素 -
h1:first-of-type:选择是h1并且它是它父亲里h1类型中的长子的元素
image
关于first-childVSfirst-of-type的使用在之前的css系列博客文章中有详细解释：
#00你认真学了css？
二、伪元素
1、定义
伪元素用于创建一些不在文档树中的元素，并为其添加样式
2、类型
image
如：
image
3、:before 和 :after（也可以写::before和 ::after）
<div class="box">
<p>这是第一段</p>
</div>
<style>
.box:before{
content: 'start'
}
.box:after{
content: 'end'
}
</style>
image
使用伪元素before和after的好处：
- 可以在后台发现，p的前后分别出现
::before和::after。html的dom树中原本没有::before和::after，现通过css样式添加，使其在dom树中添加这两个元素。 - 用添加
::before和::after的目的是为了省标签。::before生成的效果，所在的位置位于父元素（如box）的第一个子元素，::after则位于父元素（如box）的最后一个子元素，即在html的dom树上多了两个子元素，这两个子元素无需在html中体现，只需在css中表示即可。 -
::before和::after所展示的效果相当于一个行内元素（注意行内元素的一些特性） - 其中
content是必不可少
4、伪类选择器的应用场景
（1）伪类选择器应用于清除浮动
.clearfix:after {
content:'';
display:block;
clear:both;
}
详细解释请回看之前我写得关于浮动的副作用和解决办法：
（2）伪类选择器可作为替代标签
用代码替代图片，如使用css3实现一个带边框的三角符
思路：边框+三角符号的组合
先确认边框样式：
.bubble{
position: relative;
padding: 10px;
border-radius: 3px; /*可填可不填*/
background: #fff;
border: 1px solid #000;
display: inline-block;
}
<body>
<div class="bubble">
hello world
</div>
</body>
再确认三角样式：
.bubble:before{
content:'';
width: 10px;
height: 10px;
border-left: 1px solid #000;
border-top: 1px solid #000;
background: #fff;
display: inline-block;
position: absolute;
transform: rotateZ(45deg);
top: -6px;
}
<body>
<div class="bubble">
hello world
</div>
</body>
这里基础的三角样式我们在之前已经有涉及过怎么使用：
使用伪元素怎么实现三角符号（css3 ）：
基础代码：（关于三角形的位置参数可以使用页面后台进行调试）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bubble{ position: relative; padding: 10px; border-radius: 3px; /*可填可不填*/ background: #fff; border: 1px solid #000; display: inline-block; } .bubble:before{ content:''; width: 10px; height: 10px; border-left: 1px solid #000; border-top: 1px solid #000; background: #fff; display: inline-block; transform: rotateZ(45deg); position: absolute; top: -6px; } </style>
</head>
<body>
<div class="bubble">
hello world
</div>
</body>
</html>
结果：
image
运用以上知识举一反三，实现以下效果：
image
代码请戳：
我的代码
（3）伪类选择器应用于element：checked;（勾选住的一个状态）
即input元素的自定义重要属性checkbox或者radio，实现一个自定义的样式
如：笑脸切换
/*今天的心情:*/
<input type="checkbox">
<style>
input[type=checkbox]{
-webkit-appearance: none; /*去掉未勾选的方框默认样式*/ appearance: none; background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat;
display: inline-block;
width: 20px;
height: 20px;
background-size: contain; /*背景图片的大小*/
vertical-align: middle; outline: none;
} /*勾选之后的状态*/
input[type=checkbox]:checked{
-webkit-appearance: none;
appearance: none;
background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat;
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
vertical-align: middle;
}
</style>
好处：
- 没有加js
- 使用该属性样式，对于
input来说已经实现勾选状态，自定义加一些自己的图片，自动加载信息
（4）伪类选择器应用于字体图标
A、为什么针对字体库而来的字体，我们可以调整它的字体大小和颜色？
image
B、完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_nyta5x5h650cnmi.css">
</head>
<body>
<span class="iconfont icon-jirengulogojichu2"></span>
<style>
.iconfont{ font-size: 100px; color: red; } </style>
</body>
</html>
在css中添加这个:
/* \e605为字体库中的特有的一种编码形式：unicode码 */
.icon-jirengulogojichu2：before{content:'\e605';}
即：
image
