继写Express接下来的内容前，先来一篇轻松点儿的文章，之前我总结过一篇关于nth-child&nth-of-type的文章（还记得那篇文章的结论吗？对，就是两句话）。这一篇我依然来处理一个有关CSS的问题。
说到tab切换，咱们很熟悉，最常用的做法是使用JS处理显示与隐藏，听说利用CSS3的伪类选择器也能实现相同的tab切换效果，于是我就试一把。
这个方法主要是借助input和checked属性控制其后面元素的显示与否，涉及到的需要搞懂的知识点就三个：
1、nth-of-type的使用
2、input的id和label的for属性联系
3、在css3中‘~’表示兄弟元素，‘+’表示相邻元素
下面是实例区：
知道了上面这三点，那这个问题就简单了，先看一下例子的DOM结构：
从上图可以看出DOM结构很简单，但是要注意两点，第一：input的id和label中的for对应（如tab1），第二：input必须和其内容div.tab在同一级，也就是说它们必须拥有同一个父元素。
下面看一下本例的重点部分，样式：
从样式代码上可以看出，当input处理checked时，通过“+”符给label加样式，使用nth-of-type定位，在通过“~”将对应的内容区设置为display:block。
如果想让这个切换看起来更动感，可以使用transition给切换加个动画。
写在最后的总结：
通过测试，这种方法在IE8下不兼容，这没关系，因为我们可以在H5开发中用的爽爽的。哈哈
短内容，说完整事，哪怕只读一篇也能学知识。点击关注小郑搞码事，说的都是那堆代码。谢谢您的鼓励！