目标
涉及知识点
- label标签的for属性的作用
- css3 checked选择器
- css3 ~ 兄弟选择器
- css3 伪元素
- flex布局
- rem
label标签的for属性
label标签的for属性规定 label 与哪个表单元素绑定。
应用：扩大input框的响应区域
html代码如下：
<label for="yourName">姓名:</label><input id="yourName" placeholder="请输入姓名" />
<br>
<label for="isagree">同意:</label><input id="isagree" type="checkbox"/>
上面代码的效果如下：
上面的代码产生的结果就是：用鼠标点击label区域时，也会让input框处于激活状态。而其要点就是：
- label要设置for属性
- input的id值与label的for属性保持一致。
这种用法是非常常见的，如下是在网络中截取的一个例子。
css3 selected 和 ~ 兄弟选择器
下面是效果图。
对应的代码如下：
.menu-content .menu-link{margin:5px;}
.drawer:checked ~ .menu-content .menu-link{
color:red;
}
<div class="menu">
<label for="drawer-control" class="drawer-close">三条横线</label>
<input type="checkbox" id="drawer-control" class="drawer">
<div class="menu-content">
<a href="" class="menu-link">js</a>
<a href="" class="menu-link">html</a>
<a href="" class="menu-link">css</a>
</div>
</div>
对如上代码解释如下：
:checked是一个CSS 伪类选择器表示任何处于选中状态的radio(
<input type="radio">), *checkbox (<input type="checkbox">) 或("select") 元素中的option *HTML元素("option"))。具体可以查看这里。~ 通用兄弟选择器。在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 。具体可以查看这里。 注意它与
+相邻兄弟选择器的区别。-
把这两个选择器合起来如下。
image.png
为方便理解，我们可以按从左向右的阅读顺序给它们取个简单的名字:
.drawer:chekcked是一个选择器，可记为A。.menu-content可记为B，.menu-link记为C。则上面的选择器相当于：
A~B C
注意BC之时有一个空格，表示后代选择器。
这一条规则的含义是：当input处于选中状态时，就它的“侄子们“（.menu-content是它的兄弟，则a标签就是它的侄子啦）的颜色设为红色。
- input的checked状态可以通过用户去点击label（三条横线）来进行设置。你可以想一想，这个input是不是可以隐藏起来了？ 其实我们只是把它放在页面上做为一个钩子来使用，而不需要它显示出来。
css3 伪元素 来实现三条横线的效果
我们的目标是实现类似于如下效果
当然，我们有很多的方法来实现，如：
- 让ui设计师以图片的格式输出
- 通过字体图标iconfont来实现
- 通过css样式自己来设置
通过css来设置也可以有很多实现思路。最笨的方法是：一个div包含三个横线，而每一个横线可以通过设置元素的宽度，高度及背景颜色来实现，而它们的位置可以通过绝对定位来调整。这个方法不采用。
下面来介绍我采用的方法。
思路是：
第一条横线：通过设置上边框来实现。
第二条横线：通过添加伪元素，设置其背景颜色来实现。
第三条横线：通过设置下边框来实现
<label class="drawer-close"></label>
.drawer-close{
box-sizing: border-box;
width: 1.2rem;height:1.2rem;
border-top:3px solid #333;
border-bottom:3px solid #333;
position: relative;
}
.drawer-close::after{
content: "";
width:100%;height:3px;
background-color: #333;position: absolute;
top:50%;left:0;
transform: translateY(-50%);
}
after伪元素
CSS伪元素::after用来创建一个伪元素，做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
注意：
- 它用来创建一个伪元素，并选中它。
- 伪元素，故名思义它不是真正的元素：不能对它进行dom操作。但可以进行css设置。
- 与after对应的，还有一个比较常用的伪元素是before
下面详细说明一下这个选择器的效果;
.drawer-close::after{
position: absolute;/*隐式转成块级元素，让width和height可以生效；方便定位*/
width:100%;height:3px;
content: ""; /*是所有伪元素必不可少的属性，这里设置为空*/
background-color: #333;
left:0;
transform: translateY(-50%);top:50%; /*这两条规则与absolute一起实现垂直居中效果*/
}
整体来看，我们只通过一个label标签及伪元素选择器就实现一个稍微复杂的效果。这是比较好的一种做法。
