纯css实现tab切换

所用技术有：css选择器 + ~

相邻兄弟选择器+ element + element 用于选取第一个指定的元素之后的紧跟的元素，该元素是被选取元素的兄弟（不是内部）

     ~   element1~element2  它可以element1之后所有的element2 . 两元素必须拥有相同父元素，但是element2不必直接紧随element1.

   HTML：

<div id="content-middle">
			<div id="content-menu">
				<ul>
					<li class="li-1">

						<input type="radio" id="radio1" name="radio" /><label for="radio1">tab-1</label>

						<div id="tab-content1" class="tab-content">
							111
						</div>
						<i class="icon-user"></i>

					</li>
					<li class="li-2">
						<input type="radio" checked="checked" id="radio2" name="radio" /><label for="radio2">tab-2</label>
						<div id="tab-content2" class="tab-content">
							222
						</div>
					</li>
					<li class="li-2">
						<input type="radio" id="radio3" name="radio" /><label for="radio3">tab-3</label>
						<div id="tab-content3" class="tab-content">
							333
						</div>
					</li>
				</ul>
			</div>
		</div>

CSS:

			* {
				margin: 0;
				padding: 0;
			}
			
			#content-middle {
				width: 850px;
				height: 300px;
				margin: 0 auto;
				margin-top: 30px;
				border: 1px solid gainsboro;
			}
			
			#content-menu {
				width: 100%;
				height: 38px;
				border-bottom: 1px solid gainsboro;
			}
			
			#content-menu ul li {
				list-style: none;
				float: left;
				text-align: center;
				line-height: 38px;
				cursor: pointer;
			}
			
			#content-menu ul li:hover {
				background-color: gainsboro;
			}
			
			#content-menu input[type="radio"] {
				display: none;
			}
			
			#content-menu input[type="radio"]+ label {
				display: block;
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
			
			#content-menu input[type="radio"]:checked+ label {
				display: block;
				width: 100%;
				height: 100%;
				background: #9a9da2;
				color: white;
			}
			
			#content-menu input[type="radio"]:checked~ [id^="tab-content"] {
				display: block;
			}
			/*~ e1~e2 选择相同父元素下 前面是e1的e2元素*/
			
			#content-menu input[type="radio"]:checked~ .icon-user {
				background-position: -44px -56px;
			}
			
			.li-1 {
				width: 120px;
				height: 38px;
			}
			
			.li-2 {
				width: 80px;
				height: 38px;
			}
			
			.tab-content {
				position: absolute;
				top: 100px;
				left: -150px;
				width: 850px;
				height: 138px;
				display: none;
			}

效果预览：