在CSS中,偽類是一種可以在選擇器中添加的特殊關鍵詞,它允許我們選擇文檔中不同狀態或特殊元素。它們通常以冒號(:)開頭,放置在選擇器的末尾。
/* 例如,想要選擇第一個段落元素,可以使用偽類:first-child*/ p:first-child { color: red; }
以下是常見的幾種偽類及其用途:
:hover
:hover偽類用于當鼠標懸停在元素上時改變其樣式。例如,當鼠標懸停在鏈接上時,可以改變其文本顏色。
/* 改變鏈接文本顏色 */ a:hover { color: blue; }
:active
:active偽類用于當元素處于激活狀態(即按下按鈕時)時改變其樣式。例如,當用戶單擊按鈕時,可以改變其背景顏色。
/* 改變按鈕背景顏色 */ button:active { background-color: green; }
:nth-child
:nth-child偽類允許選擇文檔中的特定元素。可以使用an+b公式來選擇元素,例如:nth-child(2n+1)選擇所有奇數元素。
/* 選擇所有偶數行背景顏色 */ tr:nth-child(2n) { background-color: lightgray; }
:first-child
:first-child偽類用于選擇第一個子元素。例如,可以使用:first-child選擇第一個段落元素。
/* 選擇第一個段落元素 */ p:first-child { font-weight: bold; }
這些常見的偽類只是CSS中可用的許多偽類之一。了解和掌握偽類對于創建復雜和個性化的CSS樣式非常重要。