All CSS Pseudo(動態行為) Classes/Elements

1 篇文章 / 0 new
All CSS Pseudo(動態行為) Classes/Elements
藉由這些附屬元素, 可以展現很多動態行為, 如滑鼠滑過變色..
Selector Example Example description
:link a:link 未點選過的連結
:visited a:visited 已點選過的連結
:active a:active 當前顯示的連結
:hover a:hover 滑鼠移動在該元素區域內
:focus input:focus 該元素取得 focus
:first-letter p:first-letter 指定元素中第一個元素
:first-line p:first-line 每個指定元素中的第一行
:first-child p:first-child 指定元素中的第一個子元素
:before p:before 在該元素之前加入內容, 搭配 content 參數
:after p:after 在該元素之後加入內容, 搭配 content 參數
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"

Content Property Values
主要作用在於動態增加內容, 通常搭配上方的 :before, :after 使用
Value Description Example
none Sets the content, if specified, to nothing Try it »
normal Sets the content, if specified, to normal, which default is "none" (which is nothing) Try it »
counter Sets the content as a counter Try it »
attr(attribute) Sets the content as one of the selector's attribute Try it »
string Sets the content to the text you specify Try it »
open-quote 加入開頭引號 Try it »
close-quote 加入結尾引號 Try it »
no-open-quote Removes the opening quote from the content, if specified Try it »
no-close-quote Removes the closing quote from the content, if specified Try it »
url(url) 呈現某些多媒體資源 (如 image, sound, video, etc.) Try it »
inherit Specifies that the value of the content property should be inherited from the parent element  

Free Web Hosting