當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3之利用选择器和content属性在页面中插入内容

發布時間：2025/6/15 CSS 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3之利用选择器和content属性在页面中插入内容小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS3之使用選擇器在頁面中插入內容

? ? 1. 使用選擇器來插入內容：例， h2：before{ content：‘COLUMN’; color：white； background-color：orange； padding：1px 5px; } 2. 指定個別元素不進行插入：例， h2.sample.before{ content：none； } ? ?--表示h2中class為sample的不插入內容-- 3. 使用選擇器插入圖像：例， h2：before{ content：url（mark.png）； } 4. 使用content屬性來插入項目編號：在多個標題前加上連續編號：在content屬性中使用counter屬性來針對多個項目追加連續編號另外，還需要在元素的樣式中追加對元素的counter-increment屬性的指定，為了使用連續編號，需要將counter-increment屬性的屬性值設定為before選擇器或after選擇器的counter屬性值中指定的計數器名。例， h1：before{ content：counter（mycounter）； } h1{ counter-increment：mycount; } 5. 在項目編號中追加文字：例， h1：before{ content：‘第’counter（mycounter）'章'； } 指定編號的種類： content：counter（計數器名，編號種類） upper-roman:大寫羅馬字母 upper-alpha:大寫字母編號嵌套：可以在大編號中嵌套中編號，在中編號中嵌套小編號。大編號： h1：before{ content：counter（mycounter）； } h1{ counter-increment：mycounter； } 中編號： h2：before{ content：counter（subcounter）； } h2{ counter-increment：subcounter； } 在這個事例中，中標題的編號是連續的，如果想在第二個大標題里的中標題重新開始編號的話，需要在大標題中添加counter-reset屬性，在這事例中counter-reset：subcounter 6. 在字符串兩邊添加嵌套文字符號：可以使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加諸如括號、單引號、雙引號之類的嵌套文字符號。open-quote屬性值用于添加開始的嵌套文字符號，close-quote屬性值用于添加結尾的嵌套文字符號。注意，當需要添加雙引號時，需要使用“\”轉義字符。例， ? ?? 結果： ? ? ? ??

使用選擇器在頁面中插入文字

[html]?view plaincopy print?

<!DOCTYPE?html>??

<html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<meta?charset="utf-8"?/>??

????<title></title>??

????<style?type="text/css">??

????????p:before??

????????{??

????????????content:?'你好,';??

????????????color:?white;??

????????????background-color:?orange;??

????????????font-family:?'黑體';??

????????}??

????????p:after??

????????{??

????????????content:?',見到你很高興!';??

????????????color:?white;??

????????????background-color:?orange;??

????????????font-family:?黑體;??

????????}??

????????p.zhang:after??

????????{??

????????????content:?none;??

????????}??

????????p.zhang:before??

????????{??

????????????content:?none;??

????????}??

????</style>??

</head>??

<body>??

????<p>小紅</p>??

????<p?class="zhang">張林</p>??

????<p>王強</p>??

</body>??

</html>??

在標題前插入圖像文件

[html]?view plaincopy print?

<!DOCTYPE?html>??

<html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<meta?charset="utf-8"?/>??

????<title></title>??

????<style?type="text/css">??

????????h1:after??

????????{??

????????????content:?url(img.png);??

????????}??

????</style>??

</head>??

<body>??

????<p>王強</p>??

</body>??

</html>??

在CSS3中，使用content屬性的attr（屬性名）來指定attr的值。這樣可以將某個屬性的屬性值顯示出來。
[html]?view plaincopy print?

<!DOCTYPE?html>??

<html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<meta?charset="utf-8"?/>??

????<title></title>??

????<style?type="text/css">??

????????img:after??

????????{??

????????????content:?attr(alt);??

????????????display:?block;??

????????}??

????</style>??

</head>??

<body>??

????<p?align="center">??

????????<img?src="xp.png"?alt="系統圖片"?width="200"?height="200"?/>??

????</p>??

</body>??

</html>??

添加編號
[html]?view plaincopy print?

<!DOCTYPE?html>??

<html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<meta?charset="utf-8"?/>??

????<title></title>??

????<style?type="text/css">??

????????h3:before??

????????{??

????????????content:?'第'counter(count)'章';??

????????????color:?red;??

????????????font-family:?黑體;??

????????????font-size:?24px;??

????????}??

????????h3??

????????{??

????????????counter-increment:?count;??

????????}??

????</style>??

</head>??

<body>??

????<h3>HTML5簡介</h3>??

????<h3>HTML5結構</h3>??

????<h3>多媒體播放</h3>??

????<h3>本地存儲</h3>??

????<h3>表單與文件</h3>??

????<h3>新增元素</h3>??

</body>??

</html>??

使用before選擇器或after選擇器的counter屬性，不但可以在編號中追回文字和設置樣式，還可以為編號設置編號類型。

指定編號類型可以使用list-style-type屬性，常用的編號種類介紹如下：

[html]?view plaincopy print?

<!DOCTYPE?html>??

<html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<meta?charset="utf-8"?/>??

????<title></title>??

????<style?type="text/css">??

????????h1:before??

????????{??

????????????content:?counter(count,?upper-roman)'.';??

????????????color:?red;??

????????????font-family:?黑體;??

????????}??

????????h1??

????????{??

????????????counter-increment:?count;??

????????}??

????????h2:before??

????????{??

????????????content:?counter(count1)'.';??

????????????color:?red;??

????????????font-family:?黑體;??

????????}??

????????h2??

????????{??

????????????counter-increment:?count1;??

????????????margin-left:?50px;??

????????}??

????</style>??

</head>??

<body>??

????<h1>創建網站及站點信息</h1>??

????<h2>網站建設理論</h2>??

????<h1>安裝IIS服務器</h1>??

????<h2>站點管理</h2>??

????<h1>網站欄目及版塊設計</h1>??

????<h2>網頁文本概述</h2>??

????<h1>設計產品信息版塊</h1>??

????<h2>多彩文字設計</h2>??

</body>??

</html>??

在符號兩邊嵌入文字符號

[html]?view plaincopy print?

<!DOCTYPE?html>??

<html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<meta?charset="utf-8"?/>??

????<title></title>??

????<style?type="text/css">??

????????h1:before??

????????{??

????????????content:?open-quote;??

????????????color:?red;??

????????????font-family:?黑體;??

????????}??

????????h1:after??

????????{??

????????????content:?close-quote;??

????????????color:?red;??

????????????font-family:?黑體;??

????????}??

????????h1??

????????{??

????????????quotes:?"《"?"》";??

????????}??

????</style>??

</head>??

<body>??

????<h1>ASP基礎教程與實驗指導</h1>??

????<h1>計算機組裝</h1>??

????<h1>HTML5從新手到高手</h1>??

</body>??

</html>??

content屬性主要用來插入內容，而該屬性與before和after偽元素配合使用，將生成的內容放在一個元素內容的前面或后面。另外，該內容創建的框類型可以用display屬性控制。
content: normal string attr() uri() counter()
normal? ? 默認值。
string?? 插入文本內容。
attr()?? 插入元素的屬性值。
uri() ??插入一個外部資源（圖像、聲頻、視頻或瀏覽器支持的其他任何資源）
counter()?? 計數器，用于插入排序標識。

[html]?view plaincopy print?

<!DOCTYPE?html>??

<html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">??

<head>??

????<meta?charset="utf-8"?/>??

????<title></title>??

????<style?type="text/css">??

????????.text??

????????{??

????????????width:?400px;??

????????????height:?50px;??

????????????line-height:?50px;??

????????????overflow:?hidden;??

????????????text-align:?center;??

????????????color:?#ff0000;??

????????????border:?#993300?solid?1px;??

????????}??

????????#text_c:before??

????????{??

????????????content:?"您使用的瀏覽器支持content屬性";??

????????}??

????</style>??

</head>??

<body>??

????<div?id="text_c"?class="text">??

????????---content屬性??

????</div>??

</body>??

</html>

總結

以上是生活随笔為你收集整理的CSS3之利用选择器和content属性在页面中插入内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS3系列一（概述、选择器、使用选择器
下一篇： CSS 基本样式