在CSS中,我們可以使用:focus偽類來(lái)實(shí)現(xiàn)單擊時(shí)顯示不單級(jí)隱藏的功能,下面是一個(gè)簡(jiǎn)單的示例:
HTML代碼:
<div class="hidden-div">我是隱藏的內(nèi)容</div> <button class="show-div">顯示隱藏內(nèi)容</button>
CSS代碼:
.hidden-div { display: none; } .show-div:focus + .hidden-div { display: block; }
在這個(gè)示例中,我們有一個(gè)隱藏的div元素和一個(gè)按鈕元素,當(dāng)按鈕獲得焦點(diǎn)時(shí),隱藏的div元素將顯示出來(lái),這是通過(guò):focus偽類實(shí)現(xiàn)的,它可以選擇獲得焦點(diǎn)的元素,在這個(gè)示例中,當(dāng)按鈕獲得焦點(diǎn)時(shí),隱藏的div元素將顯示出來(lái)。
需要注意的是,這種方法只適用于相鄰兄弟元素之間的交互,因?yàn)樗褂昧薈SS的相鄰兄弟選擇器(+),如果你需要更復(fù)雜的交互,可能需要使用JavaScript來(lái)實(shí)現(xiàn)。