在CSS中,虛類是一種偽類,它可以用來指定特定狀態的元素樣式。虛類從未被添加到HTML中的元素上,而是只在CSS中使用。虛類是在元素當前不處于該狀態時被應用到元素的樣式。
/* 示例代碼 */ a { color: blue; } a:hover { /* 鼠標懸停時的樣式 */ color: red; } a:visited { /* 已訪問過鏈接后的樣式 */ color: purple; }
上面的示例代碼中,我們使用了三個不同的虛類來指定鏈接元素的不同狀態。其中,:hover
虛類用于指定當鼠標移動到鏈接上時該鏈接的樣式;:visited
虛類用于指定已訪問過的鏈接元素的樣式;而a
本身被用于指定默認的鏈接樣式。
除了:hover
和:visited
這些常用的虛類外,CSS還提供了許多其它的虛類,如:active
(當元素被激活(鼠標按下但未釋放)時應用的樣式)、:focus
(當元素獲得焦點時應用的樣式)、:first-child
(選擇元素的第一個子元素)等等。使用這些虛類,我們可以輕松地控制元素在各種不同狀態下的外觀。
/* 示例代碼 */ ul li:first-child { /* 選擇列表中的第一個元素 */ font-weight: bold; } input:focus { /* 輸入框獲得焦點時的樣式 */ border: 2px solid #ddd; }
總之,在CSS中使用虛類,我們可以為元素指定不同狀態的樣式,從而為用戶提供更加豐富的交互體驗。