在CSS中,偽類是一種用于向選定的元素添加特殊效果的調用方法。偽類以“:”符號開頭,放在選擇器的最后面。偽類可以幫助我們為特定狀態下的元素應用樣式,而這些狀態是不能簡單地通過元素本身的類或ID屬性來描述的。下面我們來看一些常見的偽類使用方法。
/* 這是一個典型的使用hover偽類的例子 */ a:hover { color: red; text-decoration: underline; }
上面的代碼表示當鼠標停留在超鏈接上時,鏈接的顏色將變成紅色,而且下劃線效果也會出現。這與使用普通的a元素樣式是不一樣的。
/* 為第一個li元素應用不同的樣式 */ ul li:first-child { font-weight: bold; }
上述代碼展示了如何使用:first-child偽類。這個選擇器的意思是選擇列表中的第一個li元素。這樣,第一個元素將應用不同的字體加粗樣式。
/* 使用nth-child偽類 */ ul li:nth-child(even) { background-color: #f2f2f2; }
這個代碼通過使用:nth-child偽類的even參數,將選擇列表中的偶數個子元素來展示背景色帶有間隔的效果。這就是通過偽類來應用樣式的方法。
上一篇css中的疊加原則