僞類和僞元素

僞類:

　　　　僞類用於定義元素的特殊狀態.

　　 僞類的做用:　　

• 當用戶將鼠標懸停在元素上時爲其設置樣式
• 樣式訪問和未訪問的連接不一樣
• 在得到焦點時設置元素的樣式

　　 僞類的語法:　　

selector:pseudo-class {
    property:value;
}

　　

　　僞類的種類(以a做爲selector):

　　　　a:link :　鼠標點擊後selector的效果

　　　　a:visited:　鼠標移過去後selector的效果

　　　　a:hover:　鼠標停留在該selector上的效果

　　　　a:active:　鼠標點擊該selector的效果

　　　　(還有更多的種類在此就不一一列舉了.)

　　　注意:　在CSS定義中 a:hover必須在 a:link 和 a:visited 以後能生效.  a:active 必須在 a:hover 以後纔能有效！僞類名稱不區分大小寫。

 

僞元素:

　　　　　　CSS僞元素用於設置元素的指定部分的樣式。

　　　僞元素做用:

• 設置元素的第一個字母或行的樣式
• 在元素內容以前或以後插入內容

　　　僞元素的語法:

selector::pseudo-element {
    property:value;
}

僞元素的種類(以p爲selector)

 

　　　　　　p::after : 在每一個<p>元素的內容後面插入一些內容

 

　　　　　　p::before: 在每一個<p>元素的內容前面插入一些內容

 

　　　　　　p::first-letter: 選擇每一個<p>元素的第一個字母

 

　　　　　　p::frist-line: 選擇每一個<p>元素的第一行

 

　　　　　　p::selection: 選擇由用戶選擇的元素的部分

 

　僞類與僞元素的異同點:

　　　相同點:

　　　　　　1.語法都是  "選擇器 + 單/雙冒號 + 內容(屬性值)".

　　　　　　2.都是對指定選擇器的樣式的設定起做用.

　　　不一樣點:

　　　　　　1.僞類使用的是單冒號" : ",而僞元素使用的是雙冒號" :: " .

　　　　　　2.僞類的做用範圍爲整個選擇器的全部內容,如 a:hover{ color:red }; 當你把鼠標移動到這個a這個標籤的時候,整個a標籤的顏色會變成紅色.