實做技巧參考這篇
重點摘要：
- html內radio btn對應的要加上label，裡面可以加入span比較好做後續設定
- 用這段隱藏原本的樣式（單選type就改radio）
input[type="checkbox"] {display:none;} - 用這段設定新樣式（未選擇），搭配after跟before就可以做到替換框框的效果。
input[type="checkbox"] + label span - 用這段設定已選擇時的樣式
input[type="checkbox"]:checked + label span
然後第一次看到+，使用上他就是可以選擇他第一個接觸那個元件。所以找了一下現在css到底有哪些選擇器，css選擇器可以參考這篇
然後我終於搞清楚 > 是什麼意思了。簡單來說 .aaa > ul 跟 .aaa ul 的差異是：
後者只要被 .aaa 包的底下所有 ul 都套用。 前者則是只有第一層。如果第一層ul又包了一層ul，這層就不會被套用。