伪类用于指定要选择的元素的特殊状态，向其添加特殊的效果，比如：
input {
width: 515px;
height: 50px;
padding: 10px 20px;
border: 1px #fff solid;
font-size: 16px;
box-shadow: 0 0 21px rgba(97, 104, 124, .15);
vertical-align: middle;
}
input:focus{
border-color: #2bb3ee;
}
效果：
给input元素添加一个:focus伪类，当input元素获得焦点时改变其边框颜色，常用于表单输入的美化。
常见的伪类有 :active, :hover, :focus, :first-child, :disabled, :visited, :last-child, :nth-child() 等。
:active 伪类用于匹配被激活的元素，比如点击一个链接时，鼠标按下到松开之间的时间这个链接时激活的。
:hover 伪类用于匹配“悬停”或说“虚指”但是没有被激活的元素，常见案例是鼠标悬停于元素上面触发。需要注意的是：对于触摸屏的设备来说，伪类:hover不一定起作用，所以对于一些很重要的内容，最好不要设计成悬浮才显示！
:focus 伪类用于匹配获得焦点的元素，在设计表单输入时常用，让获得焦点的元素更加突出，使使用者能更快找到输入地方。
:first-child， 用法如 span:first-child 用于匹配所有元素的第一个<span>，听起来有点难理解，举个栗子：
CSS:
span:first-child{
color:red;
} html:
<div>
<span>1</span>
<span>2</span>
</div>
在这里，<span>1</span>会被匹配到，“1”变成红色
:first-child伪类有一个很容易用错的地方就是:
CSS:
span:first-child{
color:red;
} html:
<div>
<a>0</a>
<span>1</span>
<span>2</span>
</div>
在上面的例子中，实际上span:first-child没有匹配到<span>1</span>，因为该例子里面，<span>的父元素<div>的第一个子元素是<a>，所以没有任何元素被匹配到，那如果要匹配<span>1</span>怎么办？用
span:first-of-type就可以了，这个坑在实际应用中还是很容易踩到的，应该注意一下。
:disabled 用于匹配被禁用的元素，比如给所有不可用的按钮（如未填写完时注册按钮不可用）disabled状态添加样式，让它变成灰色。
:visited 用于给已访问过的链接添加特殊的样式。
:last-child,:nth-child()用法和:first-child用法差不远。
伪元素允许给元素的某些部分添加样式。
所有伪元素有 ::before, ::after, ::first-letter, ::first-line, ::selection，其中 ::selection是属于CSS3新增的
伪元素用两个冒号是CSS3中的规定，用于区别 伪类，其实也是可以使用单冒号的，可以兼容过老版本的浏览器
值得注意的是，在伪类和伪元素结合使用时，如div::after:hover是不起效果的，div:hover::after则是有效的
::before 会在当前元素前面插入一个子元素作为伪元素。通过“content”属性来添加一些内容，比如加个箭头、标号什么的。
添加字符串:
CSS:
a:before{
content:"链接：";
} HTML:
<a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>
效果如：链接：浮生若梦
可以利用content的attr()调用当前元素的属性，如：
CSS:
a:before{
content:"("attr(href)")";
} HTML:
<a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>
效果图：
还可以使用url()引用媒体元素
CSS:
a:before{
content:""url(https://pic.cnblogs.com/face/1149666/20170419104717.png)"";
} HTML:
<a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>
效果图：
伪元素 ::after和 ::before用法差不多
比如下图中红框部分效果就可以用 ::after做的
代码如下：
CSS：
a{
position: relative;
top: 41px;
left: 50px;
}
a span::after{
content: '';
position: absolute;
width: 10px;
height: 10px;
bottom: -5px;
left: 27px;
border: 1px solid;
border-color: #E7E9EE #E7E9EE transparent transparent;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
background: #fff;
}
a:hover span{
display: block;
}
a span{
display: none;
position: absolute;
font-style: normal;
color: #414a60;
width: auto;
top:-38px;
left:-5px;
min-width: 44px;
height: 31px;
line-height: 30px;
padding: 0 10px;
white-space: nowrap;
border: 1px #E7E9EE solid;
text-align: center;
background: #fff;
z-index: 11;
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
HTML:
<a><b>李雷</b><span>韩梅梅，你在哪里？</span></a>
鼠标悬停显示对话
还可以用来清除浮动、和css3的动画效果做出更多好看的页面等，这就需要发挥自己想象力了
:first-letter 选择器用于选取指定选择器的首字母。
:first-line 选择器用于选取指定选择器的首行。并且 ::first-line 伪元素只能应用在块容器中。
::selection 选择器匹配被用户选取的选取是部分。
::selection 选择器只能应用少量 CSS 属性：color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。
如
CSS： ::selection
{
color:#00ff00;
}
应用上面的样式时，选取到的文字就会变成原谅色~~