溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么用css3新增屬性content，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、詳解content屬性
1、content屬性的作用：
content屬性用于插入生成的內容，常和:before選擇器和:after選擇器配合使用，清除浮動或將生成的內容放在一個元素內容的前面或后面。
2、基本語法：
content:normal|string|attr()|uri()|counter();
normal：默認值。
string：查入文本的內容，一般是一個字符串。
attr()：插入元素的屬性值，語法：attr(attribute)。
uri()：插入一個外部資源文件，可以是圖像，音頻，視頻文件或瀏覽器所支持的其他任何資源。
counter()：計數器，用于插入排序標識,counter()不僅可以追加數字編號，還可以追加字母編號或羅馬數字編號，語法：content:couter(計數器名，編號種類)
3、瀏覽器支持：
1.jpg
所有瀏覽器都支持content屬性。
注：IE8只有指定!DOCTYPE才支持Content屬性。
二、csscontent屬性的應用
1、csscontent屬性利用偽類after清除浮動
css的content屬性專門應用在before/after偽元素上，最常見的應用是利用偽類清除浮動。
//一種常見利用偽類清除浮動的代碼
.clearfix:after{
content:".";//這里利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1;
}
原理：
after偽元素通過content在元素的后面生成了內容為一個點的塊級素，再利用clear:both清除浮動。
2、csscontent屬性利用偽元素實現頁面中的內容插入
1）插入純文字
用法：content:"插入的文章"，或者content:none不插入內容
例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>插入純文字</title>
<style>
h2::after{
content:",在h2后插入內容"
}
h3::after{
content:none
}
</style>
</head>
<body>
<h2>這是h2</h2>
<h3>這是h3</h3>
</body>
</html>
關于“怎么用css3新增屬性content”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
