CSS標題列表選中樣式是網頁設計中常用的一個技巧,它可以讓用戶知道當前所選的列表項。下面介紹一些實現選中樣式的CSS代碼。
ul li:hover { /* 鼠標懸停樣式 */ background-color: #f2f2f2; color: #000; } ul li.active { /* 選中樣式 */ background-color: #007acc; color: #fff; }
上面的示例代碼是針對無序列表(ul)的,其中:hover可以讓鼠標懸停時應用特定樣式。:active可以讓處于活動狀態的列表項應用選中樣式。
如果是有序列表(ol),代碼稍有不同:
ol li:hover { background-color: #f2f2f2; color: #000; } ol li.active { background-color: #007acc; color: #fff; }
與無序列表相比,有序列表沒有本質區別,僅僅是標簽名不同而已。其他CSS樣式屬性都可以按照上述方式設定。
需要注意的是,選中樣式必須與懸停樣式區分開來,否則用戶無法區分當前所選項與鼠標懸停項。
另外,選中樣式還可以使用active偽類實現。例如:
a:link { color: #007acc; } a:hover { color: #f2f2f2; } a:active { color: #ff0000; }
上面的代碼定義了鏈接的三種狀態樣式:鏈接默認狀態(:link)、鼠標懸停狀態(:hover)和活動狀態(:active)。當用戶點擊鏈接時,鏈接將應用active樣式。
總之,選中樣式是一個很實用的CSS特效,可以增加網頁的交互性和用戶體驗。以上僅是幾種常見的實現方式,如果需要更多樣式效果,可自行嘗試。
上一篇css標準文檔流特點