溫馨提示×

css偽類選擇器怎么使用

小億
137
2023-07-05 12:25:27
欄目: 編程語言

CSS偽類選擇器用于選擇元素的特定狀態或位置。它們以冒號(:)開頭,可以與元素名稱、類選擇器、ID選擇器等組合使用。

以下是一些常用的CSS偽類選擇器及其用法:

  1. :hover - 當鼠標懸停在元素上時應用樣式。例如:a:hover { color: red; }

  2. :active - 當元素被激活(被點擊)時應用樣式。例如:button:active { background-color: yellow; }

  3. :focus - 當元素獲得焦點時應用樣式。例如:input:focus { border: 1px solid blue; }

  4. :first-child - 選擇父元素的第一個子元素。例如:li:first-child { color: red; }

  5. :last-child - 選擇父元素的最后一個子元素。例如:li:last-child { color: blue; }

  6. :nth-child(n) - 選擇父元素的第n個子元素。例如:li:nth-child(2) { color: green; }

  7. :nth-of-type(n) - 選擇父元素的第n個指定類型的子元素。例如:p:nth-of-type(odd) { color: red; }

  8. :not(selector) - 選擇不匹配指定選擇器的元素。例如::not(.hide) { display: block; }

  9. :first-of-type - 選擇父元素的第一個指定類型的子元素。例如:p:first-of-type { font-weight: bold; }

  10. :last-of-type - 選擇父元素的最后一個指定類型的子元素。例如:p:last-of-type { font-style: italic; }

這些只是一些常見的CSS偽類選擇器,還有其他更多的選擇器可供使用。了解這些選擇器的用法可以幫助你更好地控制和樣式化HTML元素。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女