
有時候 CSS 裡會出現單冒號 (:) 和雙冒號 (::)
單冒號 (:) 是用在偽類
雙冒號 (::) 則是用在偽元素
而我們也把偽類和偽元素默默背起來
直到有一天,突然被問了一個問題
偽類和偽元素到底差別在哪?
又怎麼去做區分呢?
才發現好像講不太出來耶 XD
(繼續閱讀…)
有時候 CSS 裡會出現單冒號 (:) 和雙冒號 (::)
單冒號 (:) 是用在偽類
雙冒號 (::) 則是用在偽元素
而我們也把偽類和偽元素默默背起來
直到有一天,突然被問了一個問題
偽類和偽元素到底差別在哪?
又怎麼去做區分呢?
才發現好像講不太出來耶 XD
(繼續閱讀…)
::after 為可以利用 CSS 在頁面中插入內容的偽元素 (pseudo element)。
偽元素從字面上的意思即不存在或是假的元素。也就是說它不會直接出現在 HTML 文件裡(例如:<div>、<p>、<h1> 等),而是透過 CSS 來建立與操作的元素。
雖然 ::after 的內容沒有在 DOM 裡,但頁面上還是看得到。::before 和 ::after 幾乎是一樣的東西,不同就看你是要從前面還是後面插入 XD (下面有詳細使用說明)
文言文就不講了,快來看看範例吧!
See the Pen ::after / ::before by Candy (@stringpiggy) on CodePen.22914
大家可以試著用滑鼠去選取結果 (Result) 的那段文字,是不是發現 ::after 和 ::before 的部分都選不到(如下)?
這就是沒有被寫入 DOM 裡面但頁面上看得到的意思。再進一步看 Chrome 的開發者模式裡面完全找不到我們在所要插入的內容。在這也可以很清楚看見 ::before 和 ::after 的插入點。
See the Pen ::after / ::before source-order by Candy (@stringpiggy) on CodePen.22914
只要瀏覽器有支援雙冒號 (::) 這個 CSS3 語法就有支援單冒號 (:),不過 IE 8(古董了吧~)只有支援到 (:),所以如果還想要支援到 IE 8 的話,就不能用 (::) 囉!(我個人是會忽略 IE 8 這個的老古董啦)
另外,在 W3C 標準中有提到
Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. […] CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
簡單來說就是:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
2+ | 1.3+ | 3.5+ | 6+ | 8+ | 有兒 | 有兒 |
CSS FAQ 系列文開始囉!
這個系列會解答常見的 CSS 疑惑
如果還有想要知道什麼的話
都可以底下留言唷~
第一彈就是:visibility: hidden; 和 display: none; 的差別
(繼續閱讀…)