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意義不同，意為此時被選中，那麼我執行…