文档阅读：

总结伪类与伪元素 | AlloyTeamwww.alloyteam.com!

前文回顾：

#00你认真学了css？

一、伪类：

1、定义

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化

2、类型

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;  }

（2）first-child VS first-of-type

h1:first-child :选择是h1并且它是长子的元素
h1:first-of-type:选择是h1并且它是它父亲里h1类型中的长子的元素

关于first-childVSfirst-of-type的使用在之前的css系列博客文章中有详细解释：
#00你认真学了css？

二、伪元素

1、定义

伪元素用于创建一些不在文档树中的元素，并为其添加样式

2、类型

如：

3、`:before` 和 `:after`（也可以写`::before`和 `::after`）

<div class="box">
    <p>这是第一段</p>
  </div>
  <style>
  .box:before{
    content: 'start'
  }
  .box:after{
    content: 'end'
  }
  </style>

使用伪元素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;
}

详细解释请回看之前我写得关于浮动的副作用和解决办法：#03你认真学了css？（基本样式3：浮动+定位）

（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>

这里基础的三角样式我们在之前已经有涉及过怎么使用：请戳🔽
#01你认真学了css？（基本样式1）

使用伪元素怎么实现三角符号(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>

结果：
运用以上知识举一反三，实现以下效果：

代码请戳：我的代码

（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、为什么针对字体库而来的字体，我们可以调整它的字体大小和颜色？

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中添加这个:

1 2	/* \e605为字体库中的特有的一种编码形式：unicode码 */ .icon-jirengulogojichu2：before{content:'\e605';}

即：

文档阅读：

前文回顾：

一、伪类：

1、定义

2、类型

3、应用场景

二、伪元素

1、定义

2、类型

3、:before 和 :after（也可以写::before和 ::after）

4、伪类选择器的应用场景

3、`:before` 和 `:after`（也可以写`::before`和 `::after`）