关于CheckBox美化以及CSS的伪类

这是我第二次写随笔，果然还是没有写东西的习惯啊，总是忘记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，用于改变文字选中时的效果，即背景颜色跟字体颜色