聊聊偽元素與偽類

Taichung Frontend Group

簡報連結: http://frontend.inow.tw/events/1023/

今日流程

• 來賓自我介紹
• 什麼是偽類與偽元素
• 中場休息
• 介紹CSS3的偽類/偽元素
• Demo
• QnA
• 交流時間

自我介紹時間

• 我的名字是
• 任職的公司與職務
• 關於CSS偽元素/偽類，我的了解是...
• Or 關於CSS，我想學的是

偽類與偽元素都是屬於選擇器的一部份

為什麼要有偽類與偽元素?

為了將DOM以外的內容格式化

什麼是偽類? Pseudo-classes

• 依附在選擇器上
• 使用單冒號
• 設定選擇器的特殊狀態與效果
• 換句話說就是在已經存在的DOM上設定隱藏狀態

我是選擇器:我是偽類 { 屬性:設定; }

偽類一覽表

CSS1&2

• :link
• :visited
• :active
• :hover
• :focus
• :lang(language)

什麼是偽元素

• 依附在選擇器上
• 使用雙冒號
• 建立不存在的元素

我是選擇器::我是偽類 { 屬性:設定;}

偽元素一覽表

CSS1&2

• ::first-letter
• ::first-line
• ::before
• ::after

用單冒號與雙冒號來分別偽類與偽元素

因為歷史因素，瀏覽器為了相容，偽元素可以使用單冒號

因此li:before與li::before都可以

但是a::hover就不行

中場休息

CSS3的偽類/偽元素

很多，超級多

參考: http://www.w3schools.com/cssref/css_selectors.asp

CSS3的偽類/偽元素列表1

CSS Diner的練習

• :checked
• :disabled
• :empty
• :enabled
• :first-of-type
• :in-range
• :invalid
• :last-child
• :last-of-type
• :not(selector)
• :nth-child(n)

CSS3的偽類/偽元素列表2

CSS Diner的練習

• :nth-last-child(n)
• :nth-last-of-type(n)
• :nth-of-type(n)
• :only-of-type
• :only-child
• :optional
• :out-of-range
• :read-only
• :read-write
• :required
• :root
• ::selection
• :target
• :valid

demo

Q & A

關於偽元素，我還想了解的是...

交流時間

參考文件

• http://www.w3schools.com/css/css_pseudo_elements.asp
• http://www.w3schools.com/css/css_pseudo_classes.asp
• 那些 CSS 偽元素可以幫你做的 10 個效果
• http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements
• http://www.w3school.com.cn/cssref/css_selectors.asp

交流時間

Thank You