前言
今天在看MDN上关于Positioning的CSS文档的时候，发现了一个well-known的 "Checkbox Hack"，这个仅使用CSS实现的效果十分有趣，我会在后面给大家解释。与此同时，看了这么久的MDN文档，我发现MDN中有很多相当有趣的例子，也有许多让我目瞪口呆的“骚操作”。当然，这可能只是我个人作为一个前端萌新的感受，但我仍希望将之记录下来，分享给大家。
一个问题
假设现在要你实现这样一个效果（注意右方的问号按钮），即点击一个按钮，toggle一个div或者改变某个元素的状态，你会如何实现？
思考30s先好不好。
使用JS的话并不难，为那个按钮添加点击事件，点击之后为那个div添加或移出某个class，实现“开关”的效果，十分符合直觉。然而，我们可以使用纯CSS实现这个操作。
demo 先简单看一下代码，我再进行解释：
HTML
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>
CSS
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position checkbox on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}
原理十分简单，就是我们点击的按钮实际上是一个label，这个label label的是一个checkbox，每次点击相当于勾选和取消这个checkbox。与此同时，我们将这个checkbox隐藏掉，通过绝对定位让它跑出屏幕。最关键的一段CSS来了
input[type=checkbox]:checked ~ div {
background: red;
}
思考一下，我就不解释了。
作者提起这个hack的时候说的是"well-known check box hack"，故这个hack可能只有我不知道而已（捂脸逃。如果有哪位同学也觉得豁然开朗，眼前一亮，点赞告诉我呀，我会很开心的：）
结语
这严格意义上来说是本人写的第一篇技术分享文，尽管简单， 但毕竟是迈出了第一步。文章的标题是css hacks，看到这里你可能在心里想，"哇英文这么差，只写了一个hack还写hacks"，hacks是复数是由于我本想写一个系列持续更新，但发现MDN的CSS已经快看完了，故可能没有太多机会更新了， 但我还是希望保留这个题目，说不定会更新呢？
参考
Stuff you can do with the “Checkbox Hack” -- CSS Tricks
Practical positioning examples -- MDN
