效果如下

 

通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。

1.css 如下

#rulelabel{
    background-image:url(../static/image/unselected.png);
    background-repeat: no-repeat;
    background-size: 0.4rem 0.4rem;
    display: inline-block;
    height: 0.4rem;
    width: 0.4rem;
    position: absolute;
    top: 0.28rem;
    left: -0.03rem;
}
#agreerule:checked + label{
    background-image:url(../static/image/selected.png);
}
/*将原checkbox宽高设为0，使其不显示*/
#agreerule{
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

#rulelabel{    background-image:url(../static/image/unselected.png);    background-repeat: no-repeat;    background-size: 0.4rem 0.4rem;    display: inline-block;    height: 0.4rem;    width: 0.4rem;    position: absolute;    top: 0.28rem;    left: -0.03rem;}#agreerule:checked + label{    background-image:url(../static/image/selected.png);}/*将原checkbox宽高设为0，使其不显示*/#agreerule{    width: 0;    height: 0;    padding: 0;    margin: 0;}

2.html 如下

<div>
    <label>
        <input type="checkbox" name="agreerule" id="agreerule" tabindex="5" checked/>
        <label id="rulelabel" for="agreerule"></label>
        同意QQ的服务协议和隐私权声明
    </label>
</div>

1. + 选择器

　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 　　 　　

比如：

  
This is paragraph.
 
This is a heading.
 
This is paragraph.
 
This is paragraph.

　　效果：

　　 　　

可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。

　　２. ~ 选择器 　　作用是查找某一个指定元素的后面的所有兄弟结点。 　　

示例代码： 　　

   
1
 
2
 
3
 
4
 
5