CSS中的單冒號(hào)(:)和雙冒號(hào)(::)在選擇器中使用,都具有不同的作用。
單冒號(hào):
selector:pseudo-class { property: value; }
單冒號(hào)一般用于添加偽類樣式,如hover、active、focus等。其作用是改變已有元素的狀態(tài)。例如:
a:hover { color: red; }
當(dāng)鼠標(biāo)懸停在鏈接上時(shí),鏈接文本會(huì)變成紅色。
雙冒號(hào):
selector::pseudo-element { property: value; }
雙冒號(hào)一般用于添加偽元素樣式,如before、after、first-letter等。其作用是添加元素而不用在HTML中添加標(biāo)簽。例如:
p::after { content: " - The End"; font-style: italic; }
這段代碼會(huì)在每個(gè)p元素的末尾添加一個(gè)斜體“- The End”文本。
在使用雙冒號(hào)時(shí),需要注意的一點(diǎn)是,某些舊版瀏覽器不支持它,因此建議在其前面添加單冒號(hào)來支持舊版瀏覽器。
selector:after { content: " - The End"; font-style: italic; }
總的來說,單冒號(hào)和雙冒號(hào)在CSS中具有不同的作用。單冒號(hào)用于添加偽類樣式,雙冒號(hào)用于添加偽元素樣式。在使用雙冒號(hào)時(shí),需要注意瀏覽器兼容性問題。