这是我第二次写随笔，果然还是没有写东西的习惯啊，总是忘记QAQ，今天好不容易想到要写，所以我决定写一点。
昨天写了一个CheckBox的美化，是利用CSS的伪类来做的，本来想利用图片作为选中时的效果，但是并不理想，之后百度一波，发现可以利用字符实现一个对号，感觉还不错。
过程：首先用visibility属性，visibility: hidden; 将CheckBox隐藏，然后使用:before来实现选择框和选中的效果
<input type="checkbox" class="inputs" />
CSS代码如下
.inputs{
visibility: hidden;
display: inline-block;
/*width: 1em;
height: 1em;*/
/*position: relative;
left: 2rem;*/
}
.inputs:before{
display: inline-block;
content:'';
visibility: visible;
height: 2rem;
width: 2rem;
border: 1px #A9A9A9 solid;
position: relative;
top: -2px;
/*background-size: 1em 1em;*/
}
.inputs:checked:before{
content: '\2714';
visibility: visible;
height: 2rem;
width: 2rem;
border: 1px #1b9af7 solid;
line-height: 2rem;
text-align: center;
font-size: 2rem;
background-size: 1rem 1rem;
}
然后正好借这个机会学习一波CSS的伪类选择器
1，:nth-child()选择器，用于选择子元素，括号中可以填数字或者n，n代表全部，还可以是2n(每隔两个选中一个)，2n+1也是同样的效果。 例 div p:nth-child(3);
2，:nth-of-type()选择器，用于选择指定类型的子元素，如 div a:nth-of-type(2); 假如div中有 <p> <a> 以及<span>，那么会找到所有<a>标签的第三个，
3，:only-child选择器，当div中只有一个子元素时，选择这个子元素
4，only-of-type选择器，div中有多个子元素，但只有一个指定元素时选择 ，如 div a:only-of-type;
5，:empry选择器，当div中内容为空时选择，可以用来隐藏内容为空的元素
6，:not()选择器，类似于反选，如 div p:not(:last-child); 选择除了最后一项之外的所有<p>
7，伪元素::selection，用于改变文字选中时的效果，即背景颜色跟字体颜色
