CSS中的偽類是指在特定的選擇器之后添加特定的關鍵詞,用于選擇元素的特定狀態。常見的偽類有:hover, :active, :focus等。下面是三種偽類怎么做代碼:
/* :hover 偽類 */ a:hover { color: red; } /* :active 偽類 */ button:active { background-color: green; } /* :focus 偽類 */ input:focus { border: 2px solid blue; }
以上代碼分別使用了:hover, :active, :focus偽類來改變元素的樣式,例如當鼠標懸浮在鏈接上時,鏈接文字變成紅色,當按鈕被點擊時,按鈕的背景色變成綠色,當輸入框獲得焦點時,輸入框的邊框變成藍色。
偽類可以結合其他選擇器一起使用,例如:
/* 選擇第一個子元素 */ div:first-child { color: red; } /* 選擇第一個子元素并觸發:hover偽類 */ div:first-child:hover { color: blue; }
以上代碼中,我們使用了:first-child選擇器來選擇div元素的第一個子元素,然后使用:hover選擇器來改變第一個子元素被懸浮時的顏色。
除了以上介紹的偽類,還有很多其他的偽類可供選擇,如:checked, :disabled, :not等,通過使用偽類,我們可以更方便地選擇元素的特定狀態,從而達到更好的頁面效果。
下一篇css中的偏移旋轉