|
|
|
|
|
|
弄清這兩點，你就知道偽元素與偽類的不同及使用區別了
作者:admin 時間:2022-8-15 20:51:8 瀏覽:偽元素和偽類，無論在名稱上還是語法上，都很相似，很多人剛接觸時容易混淆。本文將告訴你，弄清這兩點，你就知道偽元素與偽類的區別了。
1、語法的區別
按照規范，偽元素使用雙冒號（::），而偽類使用單個冒號（:），以便區分偽元素和偽類。
偽元素語法
selector::pseudo-element {
property: value;
}一個選擇器中只能使用一個偽元素。偽元素必須緊跟在語句中的簡單選擇器/基礎選擇器之后。
偽類語法
selector:pseudo-class {
property: value;
}類似于普通的類，你可以在一個選擇器中同時一起寫多個偽類。
2、概念的區別
偽元素
偽元素是一個附加至選擇器末的關鍵詞，允許你對被選擇元素的特定部分修改樣式，例如，下例中的 ::first-line 偽元素可改變段落首行文字的樣式。
/* 每一個 <p> 元素的第一行。 */
p::first-line {
color: blue;
text-transform: uppercase;
}
常見標準偽元素有::before (:before)，::after (:after)，::first-letter (:first-letter)，::first-line (:first-line)等。
偽類
偽類是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。例如，:hover 可被用于在用戶將鼠標懸停在按鈕上時改變按鈕的顏色。
/* 所有用戶指針懸停的按鈕 */
button:hover {
color: blue;
}
常見標準偽類有:active，:hover，:checked，:enabled，:focus，:first，:first-child，:visited等。
總結
本文介紹了偽元素與偽類的區別，它們是兩個不同的但又看似相近的感念，在用法上是不同的，了解清楚之后，在使用中才不會混淆。
使用偽元素的好處多多，你可以用它來巧妙地創建一些自定義元素和小圖標，如：
x
