CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS counter-increment 屬性 CSS3 columns 屬性

CSS content 屬性使用方法及示例

content CSS屬性與::before和::after偽元素組合使用，來(lái)生成元素中的內(nèi)容。

下表為此屬性的用法說(shuō)明和版本歷史記錄，以及該屬性在javascript腳本中的使用語(yǔ)法。

默認(rèn)值：	normal
適用于：	::before和::after 偽元素
繼承：	沒(méi)有
可動(dòng)畫制作：	否。請(qǐng)參見(jiàn) 動(dòng)畫屬性。
版本：	CSS 2、3
JavaScript 語(yǔ)法：	object.style.content="counter"

content 的使用語(yǔ)法

該屬性的語(yǔ)法如下：

content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit

下面的示例演示了如何使用content屬性。

示例

  h1::before {
   content: "Chapter: ";
   display: inline;
  }

測(cè)試看看?/?

注意：display CSS屬性控制使用content屬性生成的內(nèi)容是放在塊框還是內(nèi)聯(lián)框中。

屬性值

下表描述了此屬性的值。

值	描述
normal	對(duì)于:before和:after 偽元素，它不計(jì)算任何值。這是默認(rèn)值。
none	所述偽元素不產(chǎn)生。
counter	此值將設(shè)置content為計(jì)數(shù)器。有關(guān)更多信息，請(qǐng)參見(jiàn)counter-reset和counter-increment屬性。
串	插入指定的字符串（文本內(nèi)容）。
url(url)	的值url()指定外部資源（例如圖像）。如果資源或圖像無(wú)法顯示，則將其忽略或顯示一些占位符。
attr(attribute)	此函數(shù)在所選元素之前或之后插入指定屬性的值。如果選擇器的主題沒(méi)有指定的屬性，則將插入一個(gè)空字符串。注意：屬性名稱不應(yīng)用引號(hào)引起來(lái)。
open-quote	插入左引號(hào)。這些值將替換為quotes屬性中的適當(dāng)字符串。
close-quote	插入右引號(hào)。這些值將替換為quotes屬性中的適當(dāng)字符串。
no-open-quote	不顯示開頭的引號(hào)，而是增加（減少）引號(hào)的嵌套級(jí)別。
no-close-quote	不顯示右引號(hào)，而是增加（減少）引號(hào)的嵌套級(jí)別。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素content的屬性值。

瀏覽器兼容性

content屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號(hào)；所有主流瀏覽器均支持該屬性。

	Firefox 1+ Google Chrome1+ Internet Explorer 8+ Apple Safari 1+ Opera 4+

警告： Internet Explorer 7和更早版本不支持該content屬性。IE8僅在指定有效值的情況下才支持。

進(jìn)一步閱讀

請(qǐng)參考以下教程：CSS偽元素。

相關(guān)屬性：counter-reset，counter-increment。

CSS counter-increment 屬性 CSS3 columns 屬性