在CSS中,我們可以通過:focus偽類來實現DIV元素獲取焦點的效果。
div:focus { border: 2px solid blue; }
上述代碼表示,當DIV元素被選中時,會給它添加一個2像素粗的藍色邊框。
除了為DIV元素設置邊框外,我們還可以為其添加其他樣式,比如改變其背景色、字體顏色等等。
div:focus { background-color: lightgray; color: white; }
上述代碼表示,當DIV元素被選中時,會將其背景色設為淺灰色,字體顏色設為白色。
需要注意的是,只有可聚焦元素才能夠獲取焦點,比如input、button等。而DIV元素本身并不是可聚焦元素,因此需要為其設置tabindex屬性來讓其能夠獲取焦點。
可以獲取焦點的DIV
上述代碼表示,將一個DIV元素設為可聚焦,并賦予其tabindex屬性值0,這樣它就可以通過鍵盤Tab鍵來獲取焦點了。
總的來說,通過對CSS的:focus偽類以及tabindex屬性的運用,我們可以很方便地實現DIV元素獲取焦點的效果,從而打造更加用戶友好的Web頁面。