伪类以及伪元素的一些使用小技巧
在浏览器版本越来越高的情况下，很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用到的一些小技巧，算是笔记。
1.focus，chenked伪类的使用。
其实道理都是一样的，利用chenked或者focus的状态，通过css来定义样式，比如用图片替代checkbox框，原理就是隐藏checkbox之后，通过label操作他的兄弟元素样式。
- .checkbox-wrap input:checked + label span{background-position: 0 -20px;}
在input的checked状态下改变span元素的背景图片，来实现模拟效果。
demo如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0; font-size:12px;}
a{color:#0E6694; text-decoration:none;}
input{outline: none;}
input[type="text"]{border:#e2e2e2 1px solid;border-radius:4px;color:#2b2b2b;width:200px; height:25px; padding:0 0 0 5px; font-size:12px; margin:0 0 10px 0;}
input[type="text"]:focus{border:#6abeea 1px solid;box-shadow:#6abeea 0 0 3px;}
fieldset{width:300px; margin:30px auto; border: 0;}
legend{color:#666;color: #666666;font-size: 16px;padding: 18px 0 15px;text-shadow: 1px 1px 1px #FFFFFF;}
.checkbox-wrap{color: #999999;}
.checkbox-wrap input{display:none;}
.checkbox-wrap input + label span{background: url("https://www.chengrang.com/wp-content/uploads/2013/03/checkbox-2.png") no-repeat 0 0;cursor:pointer;display: inline-block;width:20px;height:20px;margin: -2px 5px 0 0;vertical-align: middle;}
.checkbox-wrap input:checked + label span{background-position: 0 -20px;}
.btn-wrap{padding:10px 0 0 0;}
.btn{width:90px;height:30px; border:#dfdfdf 1px solid; overflow: hidden; display:block; border-radius:4px;}
.btn span{width:89px; height:29px;display:block; line-height: 29px; text-align:center; color:#666; border-top:#fff 1px solid; border-left:#fff 1px solid; background:-webkit-linear-gradient(top,#fbfbfb,#f1f1f1); background:-moz-linear-gradient(top,#fbfbfb,#f1f1f1); }
.btn:hover span{background:-webkit-linear-gradient(top,#f1f1f1,#fbfbfb); background:-moz-linear-gradient(top,#f1f1f1,#fbfbfb);}
</style>
</head>
<body>
<fieldset>
<legend>Demo</legend>
<div class="login-control">
<input type="text" placeholder="账号/手机/邮箱">
<input type="text" placeholder="请输入密码">
</div>
<div class="checkbox-wrap">
<input type="checkbox" id="forget_pw">
<label for="forget_pw"><span></span>记住密码</label>
<a href="#">忘记密码</a>
</div>
<div class="btn-wrap">
<a href="#" class="btn"><span>提交</span></a>
</div>
</fieldset>
</body>
</html>
提示：你可以先修改部分代码再运行。
2.还有after一个这么强大的伪对象，在以前竟然只是被用作清除浮动，实在是大材小用暴殄天物。看下面这个demo，就是使用after和befor这对好基友，来实现切换标签的current状态小尖角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0; font-size:12px;}
nav{border-bottom:#ccc 1px solid; margin:30px 50px;}
nav a{display:inline-block; width:80px;height:25px;line-height: 25px;text-align:center; color:#333;text-decoration:none; position:relative;}
nav a.curr::before,nav a.curr::after{display:block;content: ""; width:0;height:0; position:absolute;left:50%;}
nav a.curr::before{border-color:#ccc transparent;border-style:solid; border-width:6px 5px 0px 5px;bottom:-6px; margin-left:-3px; z-index: 1; }
nav a.curr::after{border-color:#fff transparent;border-style:solid; border-width:5px 4px 0px 4px;bottom:-5px; margin-left:-2px; z-index: 2; }
</style>
</head>
<body>
<nav>
<a href="#" class="curr">连接</a>
<a href="#">连接</a>
<a href="#">连接</a>
</nav>
</body>
</html>
提示：你可以先修改部分代码再运行。
原理非常简单，利用border的展示特性制造两个实心尖角，嵌套之后得来一个空心（其实是实心的只是前景色与背景色一样。）
border的这种特性大家以前在做各种页面装饰的时候相信已经很了解了，四条边框的颜色粗细不同组合可以得出各种不同形状。这里只是使用befor和after来体现出来；
- nav a.curr::before{border-color:#ccc transparent;border-style:solid; border-width:6px 5px 0px 5px;bottom:-6px; margin-left:-3px; z-index: 1; }
- nav a.curr::after{border-color:#fff transparent;border-style:solid; border-width:5px 4px 0px 4px;bottom:-5px; margin-left:-2px; z-index: 2; }
这样两个伪对象的嵌套，刚好得出一个向下的小尖角（其他方向同理，调整border以及定位即可。demo比较粗糙，实际应用的时候需要微调）.
以上只是做个笔记，实际应用中遇到新的技巧我会继续添加。