CSS偽類選擇器用于選擇元素的特定狀態或位置。它們以冒號(:)開頭,可以與元素名稱、類選擇器、ID選擇器等組合使用。
以下是一些常用的CSS偽類選擇器及其用法:
:hover - 當鼠標懸停在元素上時應用樣式。例如:a:hover { color: red; }
:active - 當元素被激活(被點擊)時應用樣式。例如:button:active { background-color: yellow; }
:focus - 當元素獲得焦點時應用樣式。例如:input:focus { border: 1px solid blue; }
:first-child - 選擇父元素的第一個子元素。例如:li:first-child { color: red; }
:last-child - 選擇父元素的最后一個子元素。例如:li:last-child { color: blue; }
:nth-child(n) - 選擇父元素的第n個子元素。例如:li:nth-child(2) { color: green; }
:nth-of-type(n) - 選擇父元素的第n個指定類型的子元素。例如:p:nth-of-type(odd) { color: red; }
:not(selector) - 選擇不匹配指定選擇器的元素。例如::not(.hide) { display: block; }
:first-of-type - 選擇父元素的第一個指定類型的子元素。例如:p:first-of-type { font-weight: bold; }
:last-of-type - 選擇父元素的最后一個指定類型的子元素。例如:p:last-of-type { font-style: italic; }
這些只是一些常見的CSS偽類選擇器,還有其他更多的選擇器可供使用。了解這些選擇器的用法可以幫助你更好地控制和樣式化HTML元素。