纯CSS换肤 - 码农教程

30行代码实现纯CSS—3种换肤

老规矩，先把代码给大家，拿去粘贴直接用，无需引用，不好用评论底下随便喷，我一条一条看。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{background-color: #eee}
		input{display: none;}
		label{position: relative;display: block;width: 70px;height: 30px;text-align: center;line-height: 30px;margin:10px;cursor: pointer;border: 1px #000 solid;z-index: 3;}
		#int1+label{background-color: red}
		#int2+label{background-color: pink}
		#int3+label{background-color: orange}
		div{width: 100%;height: 100%;position:absolute;top:0px;left:0px;}
		#int1:checked+label+div{background-color: red}
		#int2:checked+label+div{background-color: pink}
		#int3:checked+label+div{background-color: orange}
	</style>
</head>
<body>
	<input type="radio" name="only" id="int1">
	<label for="int1"></label>
	<div></div>
	<input type="radio" name="only" id="int2" checked>
	<label for="int2"></label>
	<div></div>
	<input type="radio" name="only" id="int3">
	<label for="int3"></label>
	<div></div>
</body>
</html>

结构说一下，用途说一下，咱们下次再见

首先在html中搭建好input、label、div，最好是紧贴着的，比如input1、label1、div1、input2、label2、div2。。。这种，因为取名字太麻烦，这样简单省事我把方法教给大家，添加上自己的类或id就可以随意更改使用了。

具体的样式都写在style中了，大家去看的话也是一目了然，详细的样式规则和中文释义都在上一篇博客中，链接在这里 html界面换肤

点击蓝色字体就可以跳转至上一篇博客，大致略读就可完全了解其中内容。

强调一点，input是这样写的：

<input type="radio" name="only" id="int1">

input是单标记标签，type是类型，radio意味着单选按钮，但如何实现单选是一个重点。规定input[type=radio]的name必须相同，否则无法实现单选。所以三个input的name都是only意为 “ 唯一 ” ；

id值用于跟label连接，实现点击label就等同于点击input的效果，为了好看，后期我们是要让input消失的

<label for="int1"></label>

本章的难点在选择器上，如果放到大网页里，那种数千行的代码，我们不能再这样写选择器，容易起冲突。最保险的写法就是：

body>input[type=“radio”]+label+div

这句话的意思是选中body下方的直接子元素，并且它的type值等于radio，等等这里选中的并不是它，关键在“ + ”，这是兄弟选择器符号，意为选中该input下边的第一个lable，该label下边的第一个div，最终被选中的只有div，这是重点，被选中的只有div，鼠标点击只有div的颜色才会被切换。

checked意为“默认选中”，

我给int2添加了checked就是想页面刚打开的时候不是白色，有一个默认值。 CSS中的checked意义不同，意为此时被选中，那么我执行…