在CSS中,偽類(pseudo-class)是用于向某些選擇器添加特殊的效果或狀態的關鍵字。
偽類用于選擇處于文檔樹中某個特定狀態的元素,比如懸停狀態或者被訪問過狀態。偽類以冒號(:)開始。
/* 鼠標懸停狀態 */ a:hover { color: red; } /* 已訪問過的鏈接 */ a:visited { color: gray; } /* input元素的焦點狀態 */ input:focus { border: 2px solid blue; }
CSS3引入了更多的偽類,用于選擇更加細致的狀態和效果。
/* 第一個子元素 */ li:first-child { list-style-type: square; } /* 奇數行 */ tr:nth-child(odd) { background-color: lightgray; } /* 輸入框為空的狀態 */ input:empty { border: 1px dashed red; }
偽類也可以應用于特定元素,比如鏈接和輸入框等。
/* 未被訪問過的鏈接 */ a:link { color: blue; } /* 鼠標點擊鏈接但未釋放的狀態 */ a:active { background-color: yellow; } /* 已輸入但未提交的表單 */ input:valid { border: 1px solid green; }
偽類是CSS中一個非常強大和靈活的特性,能夠為網頁添加各種互動效果和狀態提示。熟練掌握偽類的用法,能夠讓我們的網頁設計更加優秀。