CSS中的:focus是一個偽類選擇器,它可以讓你為獲得焦點的元素添加樣式。這對于那些需要用戶填寫表格、輸入信息等交互式網站來說非常有用。
input:focus { border: 2px solid #0066cc; }
上面這段代碼意思是當一個input元素獲得焦點時,它會添加一個2像素寬的藍色邊框。
除了表單元素,你還可以將:focus應用于任何可獲得焦點的元素,例如鏈接、按鈕等等。這可以讓用戶更容易地知道他們正在與哪個元素交互,并且可以增強用戶體驗。
a:focus { color: red; }
上面這段代碼意思是當一個鏈接元素獲得焦點時,它會變成紅色。
需要注意的是,:focus只有在元素被點擊或通過Tab鍵獲取焦點時才會出現。如果你只想修改當元素被選擇時的外觀,你應該使用:active偽類選擇器。
button:active { background-color: #ff0000; }
上面這段代碼意思是當一個按鈕被點擊時,它的背景色會變成紅色。
總之,:focus是一個很有用的選擇器,它可以幫助你增強用戶體驗并提高網站的可訪問性。無論你是在開發哪種類型的網站,它都值得一試。
上一篇html與css教材
下一篇html與css基礎試卷