藉由這些附屬元素, 可以展現很多動態行為, 如滑鼠滑過變色..
Content Property Values
主要作用在於動態增加內容, 通常搭配上方的 :before, :after 使用
from http://www.w3schools.com
| 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 |
from http://www.w3schools.com
