今天有個簡單的需求，就是實現表單底部的勾選知情同意書的效果，如圖：
我想着玩意做了百八十遍豈不是手到擒來，於是我寫下了這樣的代碼：
<!DOCTYPE html>
<html>
<head>
<title>測試</title>
<style type="text/css">
label {
display: block;
width: 20px;
height: 20px;
border: 1px solid #666;
}
input {
display: none;
}
input:checked + label {
border: 1px solid #f00;
}
</style>
</head>
<body>
<div>
<label for="agree"></label>
<input type="checkbox" name="agree" id="agree">
</div>
</body>
</html>
這，我點擊 label 怎麼沒有改變 border 爲 #f00，我開始慌了。。
解決
最後發現，input:checked + label 這裏的 + 是代表兄弟元素，兄弟元素一定是在該元素的下面，也就是我換一下 input 和 label 標籤的位置就好了
<body>
<div>
<input type="checkbox" name="agree" id="agree">
<label for="agree"></label>
</div>
</body>
這件事告訴我一個道理，遇到 bug 不要慌，一步一步縮小 bug 範圍，實在不行寫一個小 demo，最後你就知道問題出在哪了~