僞類與僞元素的異同

時間 2019-11-24

標籤元素異同简体版

原文原文鏈接

　　在說明它們的區別以前先講講這兩個是什麼東西.html

　僞類:

　　什麼是僞類:　　

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

　　僞類的做用:　　

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

　　僞類的語法:　　

selector:pseudo-class {
    property:value;
}

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

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

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

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

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

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

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

　　若是還不懂的話下面上代碼:io

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 /* unvisited link */
 6 a:link {
 7     color: red;
 8 }
 9 
10 /* visited link */
11 a:visited {
12     color: green;
13 }
14 
15 /* mouse over link */
16 a:hover {
17     color: hotpink;
18 }
19 
20 /* selected link */
21 a:active {
22     color: blue;
23 }
24 </style>
25 </head>
26 <body>
27 
28 <p><a href="default.asp" target="_blank">Link</a></p>
29 
30 </body>
31 </html>

　僞元素:

　　　什麼是僞元素:

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

　　　僞元素做用:

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

　　　僞元素的語法:

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

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

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

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

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

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

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

　　　　若是須要增長內容的話property:value須要添加一個 content: " text "; (text爲你須要添加的內容)至於效果你們能夠本身去試一試,這裏也不在過多的詳說了.

　僞類與僞元素的異同點:

　　　　相信你們都已經發現這二者有着不少類似之處,可是同時也具備着些許的差別感吧.下面來正式講解一下二者的區別:

　　　相同點:

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

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

　　　不相同點:

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

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

　　　　　　僞元素的做用範圍爲這個選擇器的一部分,如p::after{ content: "text";} 只是更改了p標籤前面的內容.

　　PS:以上爲我總結出來的經驗,但願能幫到讀者.另外,本人知識水平有限,若有遺漏或者錯誤之處敬請補充.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。