最近切一個頁面的時候涉及到了一個tab切換的部分，因為不想用js想著能不能用純css的選擇器來實現切換效果。搜了一下大致有下面三種寫法。
利用:hover選擇器
利用a標籤的錨點 + :target選擇器
利用label和radio的繫結關係和radio選中時的:checked來實現效果
經過實驗發現第三種方法達到的效果最好。所以下面講一下第三種實現的方法。
這種方法的寫法不固定，我查資料的時候各種各樣的寫法都有一度讓我一頭霧水的。最後看完發現總體思路都是一樣的，無非就是下面的幾個步驟。
繫結label和radio：這個不用說id和for屬性繫結
隱藏radio按鈕：這個方法有很多充分發揮你們的想象力就可以了，我見過的方法有設定display:none;隱藏的、設定絕對定位，將left設定為很大的負值，移動到頁面外達到隱藏效果、設定絕對定位：使元素脫離文件流，然後opacity: 0;設定為透明來達到隱藏效果。
隱藏多餘的tab頁：和上面同理，還可以通過z-index設定層級關係來相互遮擋。
設定預設項：在預設按鈕上新增checked="checked"屬性
設定選中效果：利用+選擇器 和~選擇器來設定選中對應元素時下方的tab頁的樣式，來達到選中的效果
/* 當radio為選中狀態時設定它的test-label兄弟元素的屬性 */
input[type="radio"]:checked+.test-label
/* 當radio為選中狀態時設定與它同級的tab-box元素的顯示層級 */
input[type="radio"]:checked~.tab-box
演示地址
**：
用 CSS 實現的陰影效果
中文翻譯 onestab 2004 02 28 假如有一種技術，用 css 對任意塊級元素靈活地新增陰影，而且能隨著內容的大小自動擴充套件，...
用swiper實現類似淘搶購的滑動tab效果
en class timeaxis warp class timeaxis current class swiper container id swiper container3 class class swiper slide data num 0 class timeaxis item inne...
用CSS3偽類實現書籤效果
前兩天想給部落格上添個書籤效果，類似於下面這樣 在網上搜尋一番後，發現一篇純css書籤導航按鈕用三個div實現了這個效果。但是可沒有給我這麼...