CSS偽類選擇器是指用來選擇HTML元素的特殊關鍵字,這些關鍵字在選擇效果上與一般選擇器有所不同。常用的偽類選擇器有以下幾類:狀態偽類選擇器、目標偽類選擇器、結構偽類選擇器、語言偽類選擇器以及用戶輸入偽類選擇器等。
/* 狀態偽類選擇器 */ a:link { color: blue; } /* 未訪問鏈接 */ a:visited { color: purple; } /* 已訪問鏈接 */ a:hover { color: green; } /* 鼠標懸停鏈接 */ a:active { color: red; } /* 點擊鏈接 */ /* 目標偽類選擇器 */ :target { background-color: yellow; } /* 被錨定目標對象,例如#id */ /* 結構偽類選擇器 */ :first-child { color: red; } /* 選擇其父元素下的第一個子元素 */ :last-child { color: blue; } /* 選擇其父元素下的最后一個子元素 */ :nth-child(n) { color: green; } /* 選擇其父元素下的第n個子元素 */ /* 語言偽類選擇器 */ :lang(en) { color: red; } /* 選擇指定語言的元素 */ /* 用戶輸入偽類選擇器 */ :focus { background-color: lightblue; } /* 元素獲得焦點 */ :valid { border: 2px solid green; } /* 表單元素輸入合法 */ :invalid { border: 2px solid red; } /* 表單元素輸入非法 */
以上就是CSS偽類選擇器的主要分類和常用的選擇器示例,掌握這些選擇器可以讓我們更加靈活地選擇HTML元素,實現更加豐富的樣式效果。
上一篇css位于頁面最底部
下一篇css伸縮導航效果講解