在CSS中,偽類是用于在特定條件下選擇元素的一種方式。偽類屬性用于為元素的某些狀態或情況定義樣式,例如鼠標懸停、被訪問等等。以下是一些常用的CSS偽類屬性:
/* :hover:鼠標懸停時 */ a:hover { color: red; text-decoration: underline; } /* :active:激活狀態下(鼠標按下還沒抬起時) */ button:active { background-color: green; } /* :visited:已訪問鏈接 */ a:visited { color: purple; } /* :focus:獲得焦點時 */ input:focus { border: 2px solid blue; } /* :nth-child:選擇某一元素的第n個子元素 */ li:nth-child(3) { color: orange; } /* :nth-of-type:選擇某一元素類型的第n個子元素 */ p:nth-of-type(2) { font-weight: bold; } /* :first-child:選擇其父元素下的第一個子元素 */ div:first-child { border: 1px solid black; } /* :last-child:選擇其父元素下的最后一個子元素 */ ul:last-child { border: 1px solid gray; }
這些偽類屬性可以幫助我們有效地控制頁面上的元素狀態,從而更好地展現我們想表達的內容。需要注意的是,不同的偽類屬性可能在不同的瀏覽器中有不同的表現,因此在開發時需要考慮兼容性問題。
上一篇簡述css框模型