checkbox/radio 應該算是最常見的作法，很多用 CSS 作的東西都會用到這個技巧，在 Google 上也能找到許多文章，這篇就是其中說明的最詳細的之一。他的特色在於同一頁面內可放置多個元件而不互相衝突，因此 ":target" 更適合製作 Slider 等元件。
這裡將會用到 CSS3 的 Selector "~"、":checked"，W3C 是這樣說明的
~
E ~ F an F element preceded by an E element
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
:checked
Radio and checkbox elements can be toggled by the user. Some menu items are "checked" when the user selects them. When such elements are toggled "on" the :checked pseudo-class applies. While the :checked pseudo-class is dynamic in nature, and can altered by user action, since it can also be based on the presence of semantic attributes in the document, it applies to all media. For example, the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes as described in Section 17.2.1 of HTML4, but of course the user can toggle "off" such elements in which case the :checked pseudo-class would no longer apply.
Some URIs refer to a location within a resource. This kind of URI ends with a "number sign" (#) followed by an anchor identifier (called the fragment identifier).
URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section_2 in an HTML document:
http://example.com/html/top.html#section_2
A target element can be represented by the :target pseudo-class. If the document's URI has no fragment identifier, then the document has no target element.
blakekathryn
yousharknotpass
tangentwithtanner