CSS 小技巧：如何使用 :target 和 :checked 來做出一些效果

是的，我找到工作了…
現在這工作目前是試用期三個月中，還沒有開始負責一些大項目，大多是做一些小網頁，但之後好像要學 phonegap build ( adobe 的 phonegap ，不是 cordova ) 和 CodeIgniter ( php MVC framework )。

好，離題了…
----

最近在寫網頁，給自己訂下有一些效果能單純的用 css 來表現就不要去用 script ，為什麼要那麼費力？主要是要避開無障礙網頁的規範，雖然用 script 來做，一開始是比較快速跟直覺，但再遇上無障礙的檢測就累了…倒不如一開始就用 css 來做。

在網頁中可能總是會有想到做到切換 ( switch ) 內容的行為，當然，可以直接用超連結的方式來換網頁就好，可是明明這幾個網頁的內容都不多，而且全部會變的只有那個固定範圍的內容而已，要這樣就複製一堆主體上沒變動的網頁，所以想在一頁就把這一些事做完。



這時，在純 css 的作法，可以利用錨點超連結在 css selector 上的 :target 屬性來進行，請看以下展示畫面(如果內置框架看不到，可點此連結)：

可以看到我在點選 a 或 b 的超連結時就會切換底下的畫面。

不過，利用錨點的這個 :target 的方式，只能作用於單一區域，如果想要一次展示在畫面上多個 id="a" 的區域，以這個方法只會顯示排列上第一個 id="a" 的，如以下展示畫面(如果內置框架看不到，可點此連結)：

我多複製了同 id 的 a 與 b 的區塊，然後在內容多加了 x 與 xx ，在點擊切換 a 或 b 的錨點連結時，其實只會出現第一個順序的 id="a" 或 id="b" 的內容， x 或 xx 的都不會出現，所以如果要一次就顯示全部，那就必須把 x 跟 xx 的東西都放到一個 id="a" 或 id="b" 區塊中，但在製作網頁時未必都能如此單一化呀，很多時候都是要多區域連動的，如果單一化就行，那幹嘛要 script 特效…

所以這時我們可以利用單選 ( radio ) 跟複選 ( checkbox ) 來達到多區塊連動的效果，如以下展示 checkbox 畫面(如果內置框架看不到，可點此連結)：

以下展示 radio 畫面(如果內置框架看不到，可點此連結)：

以上除了可以看到 checkbox 和 radio 在多區塊連動展示的效果，也可以看到兩者的不同，因為 checkbox 在定義上就是複選，所以在展示上，可以發現如果沒有先把 a 的取消再點 b ，就會讓 a 跟 b 的內容同時顯示，而 radio 只要 name 設置一樣，就是單選，也就是可以達到「切換」的效果，如果 name 取的不一樣，那就跟 checkbox 的效果一樣了。

而且讓畫面看起來更乾淨，只要把 checkbox 和 radio 設置成 display: none; 就好了。

另外，在 checkbox 跟 radio 的 css 中可以看到我使用的 selector 是用「input#a:checked ~ div#a」的寫法，利用了波浪符號 ( ~ tilde )，這方式依 W3C 的解釋應該是指符號右邊指定的元素是跟符號左邊同一個父層 ( same parent in the document tree ) 且符號右邊指定的元素排列順序是排在符號左邊之後的 ( 排列順序應該是指 html 原始碼的順序 )。

所以，如果有一個 div#a 放在 input#a 之前，除了該 div#a 不會被顯示之外，甚至會連 input#a 的點擊失效，所以等於沒有 :checked 。

所謂同一個父層且排列順序要在符號左邊的元素之後，比較簡單瞭解的意思就是… input#a 跟 div#a 要在同一個區塊中，而且 div#a 要排在 input#a 之後，另外， div#a 可以被區塊包起來，但該區塊也是要滿足與 input#a 同一個父層，且順序要排在 input#a 之後，如以下展示畫面(如果內置框架看不到，可點此連結)：

可以看到我把 div#a 放進了 div#c1 ，把 div#b 放進了 div#c2 ，然後把 input#a, input#b, div#c1, div#c2 都用一個 div 包起來，重點是在 css 的部份，可以看到我改成了「input#a:checked ~ div#c1 div#a { display: block;}」，這意思就是「如果 input#a 的狀態是 checked ，那跟 input#a 同一個父層且排在後面的 div#c1 中的 div#a 的 display 屬性設為 block」。

由此，如果因為排版的關係，多區塊連動的區塊一定要放在很多其他不同的區域中，這時候最好的作法就是把 checkbox 或 radio 放在最上層，也就是放在 body 或 document 的第一層中，反正會設為隱藏嘛。

另外也要留意，因為這種 checkbox 跟 radio 其實已經是無意義的，只是單純用在特效上，要記得最好不要放在 form 中，以免被 post 出去，雖然會是空值，但難保你會忘了或怎樣，既然無用，那乾脆也不要被 submit 出去不是更好。