iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

前端補給站,每天一個知識點系列 第 28

Day27【CSS】偽類 & 偽元素

  • 分享至 

  • xImage
  •  

偽類和偽元素皆是從 DOM tree 抽象出來的概念,
用以修飾實際上不在 DOM tree 上的部分。

比較表

|中文|英文|符號|DOM tree|作用|
|--|--|--|--|
|偽類|Pseudo-classes|:|不會出現|定義元素的特殊狀態|
|偽元素|Pseudo-elements|::|會出現|選擇元素的指定部分|


偽類:

  • 操作對象:原本就存在的元素
  • 用途:用於選取特定狀態的元素
  • 語法:selector:pseudo-class
  • 偽類舉例:
    • :hover:鼠標懸停其上的元素
    • :visited:已訪問過的鏈接
    • :focus:獲得焦點的元素

偽元素

  • 操作對象:DOM tree 之外的虛擬元素
  • 用途:修飾元素對應的抽象內容
  • 語法:selector::pseudo-element
  • 共 6 種:
    • ::after:在一個元素後插入內容
    • ::before:在一個元素前插入內容
    • ::first-line:文本的第一行
    • ::first-letter:文本的第一個字母
    • ::marker:項目符號樣式
    • ::selection:被游標選擇反白的部分

CSS2 以前,first-line 使用的是單冒號(:),CSS3 後為區分偽類和偽元素而改成雙冒號(::),同時向下兼容,因此 :first-line:first-line 兩種寫法 CSS3 都可接受。


參考資料:


上一篇
Day26【Web】TCP 安全協定:SSL/TLS
下一篇
Day28【Web】網頁的號碼牌:Cookie
系列文
前端補給站,每天一個知識點30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言