content 屬性/樣式/取值/語(yǔ)法/格式寫法/簡(jiǎn)寫/用法[CSS教程手冊(cè)]

語(yǔ)法：

content：[ [<uri> | icon] ',' ]* [ normal | none | inhibit | <content-list> ]

<counter> = counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type)

默認(rèn)值：normal

適用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas

繼承性：無(wú)

動(dòng)畫性：否

計(jì)算值：指定值

取值：

normal：: 默認(rèn)值。表現(xiàn)與none值相同
none：: 不生成任何值。
<attr>：: 插入標(biāo)簽屬性值
<url>：: 使用指定的絕對(duì)或相對(duì)地址插入一個(gè)外部資源（圖像，聲頻，視頻或?yàn)g覽器支持的其他任何資源）
<string>：: 插入字符串
counter(name)：: 使用已命名的計(jì)數(shù)器
counter(name,list-style-type)：: 使用已命名的計(jì)數(shù)器并遵從指定的list-style-type屬性
counters(name,string)：: 使用所有已命名的計(jì)數(shù)器
counters(name,string,list-style-type)：: 使用所有已命名的計(jì)數(shù)器并遵從指定的list-style-type屬性
no-close-quote：: 并不插入quotes屬性的后標(biāo)記。但增加其嵌套級(jí)別
no-open-quote：: 并不插入quotes屬性的前標(biāo)記。但減少其嵌套級(jí)別
close-quote：: 插入quotes屬性的后標(biāo)記
open-quote：: 插入quotes屬性的前標(biāo)記

說(shuō)明：

用來(lái)和:after及:before偽元素一起使用，在對(duì)象前或后顯示內(nèi)容。

對(duì)應(yīng)的腳本特性為content。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-7.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
Basic Support	8.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>content_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列【CSS在線手冊(cè)-網(wǎng)站設(shè)計(jì)教程參考資料】</title>
<meta name="author" content="易網(wǎng),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)站建設(shè),www.dgyx668.com" />
<style>
.string p:after{margin-left:-16px;background:#fff;content:"是";color:#f00;}
.attr p:after{content:attr(title);}
.url p:before{content:url(../../skin/ico.png);}
.test ol{margin:16px 0;padding:0;list-style:none;}
.counter1 li{counter-increment:testname;}
.counter1 li:before{content:counter(testname);color:#f00;font-family:georgia,serif,sans-serif;}
.counter2 li{counter-increment:testname2;}
.counter2 li:before{content:counter(testname2,lower-roman);color:#f00;font-family:georgia,serif,sans-serif;}
.counter3 ol ol{margin:0 0 0 28px;}
.counter3 li{padding:2px 0;counter-increment:testname3;}
.counter3 li:before{content:counter(testname3,decimal)".";color:#f00;font-family:georgia,serif,sans-serif;}
.counter3 li li{counter-increment:testname4;}
.counter3 li li:before{content:counter(testname3,decimal)"."counter(testname4,decimal)".";}
.counter3 li li li{counter-increment:testname5;}
.counter3 li li li:before{content:counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)".";}
</style>
</head>
<body>
<ul class="test">
	<li id="ylvu49i" class="string">
		string：
		你的瀏覽器是否支持content屬性：否
	</li>
	<li id="wvpzc4y" class="attr">
		attr：
		
	</li>
	<li id="wpodlkz" class="url">
		url()：
		如果你看到文字前面的圖標(biāo)則說(shuō)明你目前使用的瀏覽器支持content屬性
	</li>
	<li id="pkenud9" class="counter1">
		counter(name)：
		<ol>
			<li>列表項(xiàng)</li>
			<li>列表項(xiàng)</li>
			<li>列表項(xiàng)</li>
		</ol>
	</li>
	<li id="vqkpt3g" class="counter2">
		counter(name,list-style-type)：
		<ol>
			<li>列表項(xiàng)</li>
			<li>列表項(xiàng)</li>
			<li>列表項(xiàng)</li>
		</ol>
	</li>
	<li id="8rqqk8z" class="counter3">
		counter(name)拓展應(yīng)用：
		<ol>
			<li>列表項(xiàng)
				<ol>
					<li>列表項(xiàng)
						<ol>
							<li>列表項(xiàng)</li>
							<li>列表項(xiàng)</li>
						</ol>
					</li>
					<li>列表項(xiàng)</li>
				</ol>
			</li>
			<li>列表項(xiàng)
				<ol>
					<li>列表項(xiàng)</li>
					<li>列表項(xiàng)</li>
				</ol>
			</li>
			<li>列表項(xiàng)
				<ol>
					<li>列表項(xiàng)</li>
					<li>列表項(xiàng)</li>
				</ol>
			</li>
		</ol>
	</li>
</ul>
</body>
</html>