html与css是否图灵完备，这个争论一直没有平息，但是就算不是图灵完备也无所谓呀，我们依旧可以利用css的一些不常用选择器来做一些很有趣的事情。
好吧其实是我刚刚给这个博客配上了 codepen，就准备好好爽一发。顺便比较一下 jsfiddle。
1.CSS中的不常用选择器
我们通常使用较多的是不外乎是元素选择器，类选择器，id选择器这三种并且配合上子代选择器或者后代选择器。高端一点后会试着用一些伪类选择器(:hover)与伪对象(::after)选择器。
但实际上CSS的选择器多种多样类型丰富，还有更多的元素类型和关系以及更多的伪类通过选择器定位到。比如相邻选择器+和兄弟选择器~。以及伪类选择器:checked.
既然说道了这里就不得不提一下，html标签中有几款非常特别的表单标签，能够记录我么的点击事件，有请<input type="checkbox">和<input type="radio">标签和他们的好基友<label>标签。
借助这几个东西我们可以实现一些很有趣的效果。
2.纯CSS实现的一些特效
2.1谁说我们CSS不能做手风琴？
这个例子中就使用了css的选择器配合来实习的点击动画效果。
2.2点击变换的小tip
这里同样使用了label标签来扩大点击的区域，checkbox控件可以记录两种不同的状态，而这两种状态又恰巧是css选择器能够识别出来的。