CSS
[CSS]一個冒號和和兩個冒號的分別

css selector

有時見到:after,有時又見到::after,兩個到底有咩分別?

一個冒號-Pseudo-class

在Selector後加Keyword去指定所選的Element的特定狀態。最常見的是用於的:visited、:active之類。

兩個冒號-Pseudo-element

跟Pseudo-class的分別是:指定Document的「部分」而不是狀態。最常見的是::after、::before之類。

為何有時是一個冒號,有時是兩個冒號?

在CSS3前,不論是Pseudo-class還是Pseudo-element,都是一個冒號的。但Pseudo-element在CSS3已更改成兩個冒號,同時用一個冒號來指定Pseudo-element的寫法仍是可行。

結論

以Browser Compatibility來說,應是用一個冒號來指定Pseudo-element可支援更多Browser。不過對我此等無視Old version browser的人來說,會跟CSS3的標準來寫啦。

參考

Pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-elements
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Advanced CSS selectors
https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#CSS3_pseudo-element_double_colon_syntax

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">