神奇的css3，不写任何逻辑也能做选项卡切换

相信大家做选项卡切换的时候都是用js或者jq完成的，但是有没有想过，样式表也能直接做呢？

今天就教大家如何实现，

主要是用到一些css3的属性，

基础操作，先布局

        <label>
			<input type="radio" name="tab" checked="checked" />
			<span>选项1</span>
			<p>选项1的内容</p>
		</label>
		<label>
			<input type="radio" name="tab"/>
			<span>选项2</span>
			<p>选项2的内容</p>
		</label>
		<label>
			<input type="radio" name="tab"/>
			<span>选项3</span>
			<p>选项3的内容</p>
		</label>
	

样式这样写

label{
				float: left;
				width: 50px;
				position: relative;
				margin-right: 5px;
			}
			label input{
				position: absolute;
				left: -500px;
				top: -500px;
			}
			label span{
				float: left;
				width: 50px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border: 1px solid #000000;
				cursor: pointer;
				/*background: red;*/
			}
			label p{
				display: none;
				position: absolute;
				width: 120px;
				border:1px solid #000000;
				top: 43px;
				word-break: break-all;
			}
			label input:checked~span{
				background: red;
			}
			label input:checked~p{
				display: block;
			}
			label:nth-child(2) p{
				left: -55px;
			}
			label:nth-child(3) p{
				left: -110px;
			}

这里主要用到伪类checked显示和隐藏盒子

然后nth-child调整位置。