:target 是CSS3 中新增的一個偽類，用以匹配當前頁面的URI中某個標志符的目標元素（比如說當前頁面URL下添加#comment就會定位到id=“comment”的位置，俗稱錨）。CSS3 為這個動作賦予了更加多的功能——就如同:hover 一樣你可以做一些樣式定義。
先上效果圖

正如標題所說，本文是教你如何巧用CSS3:target偽類制作Dropdown下拉菜單，原生HTML+CSS，無JavaScript。為了吸引各位往下看，先上實際例子，再進行剖析。

Duang~ 實際例子其實就是DeveMobile 主題的右上角那個按鈕，你點一下就會有一個Dropdown下拉菜單出現，在其他區域點擊返回原狀。請用手機掃碼查看：

或者直接看這個gif 圖片：

實例剖析

從解釋原理的角度我們將HTML 拉出來最小化代碼如下：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表