你可能不知道的CSS Hacks

前言

今天在看MDN上关于Positioning的CSS文档的时候，发现了一个well-known的 "Checkbox Hack"，这个仅使用CSS实现的效果十分有趣，我会在后面给大家解释。与此同时，看了这么久的MDN文档，我发现MDN中有很多相当有趣的例子，也有许多让我目瞪口呆的“骚操作”。当然，这可能只是我个人作为一个前端萌新的感受，但我仍希望将之记录下来，分享给大家。

一个问题

假设现在要你实现这样一个效果（注意右方的问号按钮），即点击一个按钮，toggle一个div或者改变某个元素的状态，你会如何实现？
思考30s先好不好。
使用JS的话并不难，为那个按钮添加点击事件，点击之后为那个div添加或移出某个class，实现“开关”的效果，十分符合直觉。然而，我们可以使用纯CSS实现这个操作。
demo 先简单看一下代码，我再进行解释：
HTML

Do Something

Control me

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