CSS中有很多偽類,用于指定元素在不同狀態下的樣式,其中冒號偽類是一種常見而且實用的偽類。下面我們來了解一下冒號偽類。
選擇器:偽類 { 屬性:值; }
冒號偽類都是以冒號開頭的,可以指定元素處于某個狀態下的樣式。下面是一些常見的冒號偽類:
:hover //當鼠標懸停在元素上時 :focus //當元素獲得焦點時 :active //當元素被激活時(一般指用戶點擊元素并持續按下鼠標) :first-child //選擇父元素的第一個子元素 :last-child //選擇父元素的最后一個子元素 :nth-child(n) //選擇父元素的第n個子元素 :nth-of-type(n) //選擇父元素中特定類型的第n個子元素
使用這些偽類可以方便地對元素進行樣式控制,比如:
a:hover { color: blue; } input:focus { border: 2px solid red; } li:first-child { font-weight: bold; } p:nth-of-type(2n) { background-color: #eee; }
我們可以看到,冒號偽類通過指定元素處于某個狀態或者是子元素的位置,靈活地調整樣式,達到更精確的控制效果。