input 和label配合的妙用
1：作為文字隱藏與否的開關；
如下代碼：對div里面所包含的文字較多，一開始只展示小部分，當用戶點擊按鈕時，進行全部內容的展示（按鈕是以向下隱藏箭頭的圖片）
html代碼如下
<input type="checkbox" id="A1" >
<div>
lestias assumenda nesciunt maiores minus molestiae exercitationem, dolores odit similique. Quidem odit distinctio optio totam eaque reiciendis expedita, voluptatem impedit iste placeat voluptate eius fugit vero, ut minus laudantium ullam debitis dolor? Possimus inventore sit molestiae distinctio. Dolore perspiciatis commodi maiores eius incidunt aut quisquam tenetur neque. Magni voluptatibus omnis tempore quas quos! Quisquam, molestias. Natus, illo culpa tempore enim praesentium corrupti ipsum! Sed eveniet voluptate, minus tempora illum deleniti laudantium facere enim nesciunt, aliquid temporibus pariatur qui. Totam autem consequatur officiis libero magni sit asperiores magnam ipsum.
</div>
<!-- <input type="checkbox" id="A1" > -->
<label for="A1">
<img src="向下箭頭按鈕.jpg" alt="">
</label>
css代碼如下：
div{
width: 500px;
height: 100px;
margin: auto;
border: 1px solid red;
overflow: hidden;
}
input{
display: none;
}
// 當input被選中的時候，img 按鈕轉180，向上
input:checked~label>img{
transform: rotate(180deg);
}
// 當input被選中的時候，div內容顯示（選擇器；只能是兄弟，而不能是弟兄，也就是說可以選中前面的標簽+后面的標簽；不能選擇后面的標簽+前面的標簽）
input:checked+div{
height: auto;
}
2：點擊效果展示，當一個圖片被點擊后，圖片就被換掉（以此來提醒用戶點擊成功，增加用戶體驗）
HTML代碼如下（p元素用來插入背景圖片，作為用戶點擊的按鈕）：
<input type="checkbox" id="B2">
<label for="B2">
<p></p>
</label>
CSS代碼如下：
p{
margin: 0;
padding:0;
width: 52px;
height: 52px;
background-image: url("點擊前圖片按鈕.jpg")
}
#B2:checked+label>p{
background-image: url("點擊后圖片按鈕.jpg")
}