CSS偽類是CSS中一種用于選擇元素的特殊關鍵字,用于對不同的元素進行不同的樣式設置,從而更好的控制文檔的顯示。CSS偽類一般以冒號“:”開頭,并且放在CSS選擇器的最后面。
p { color: red; } p:first-of-type { color: blue; }
上述例子中,第一個選擇器用來設置所有的p元素的顏色為紅色,而第二個選擇器中使用了偽類:first-of-type來選擇文檔中第一個p元素,然后將其文字顏色變成了藍色。
CSS偽類有很多種,下面列舉一些比較重要的。
/* 鏈接相關 */ a:link { color: green; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } /* 狀態相關 */ input:focus { background-color: yellow; } :checked { background-color: lime; } :not(:first-of-type) { text-decoration: underline; }
以上代碼中,第一組代碼分別為鏈接默認狀態、已訪問狀態、鼠標懸停狀態和被點擊狀態的樣式。第二組代碼中的input:focus選擇器將會讓文本框獲得焦點后的背景色變成黃色,而:checked選擇器則表示選中的單選框或復選框的背景色變成綠色。第三組代碼中的:not(:first-of-type)選擇器則表示選取的不是某一類元素中的第一個元素,將會為這個元素設置下劃線。