溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css3中content和attr屬性的作用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
CSS3中的content屬性可以通過CSS在頁面元素中填寫內容，還可以實現字符串連接操作；content和attr配合使用可以從元素中動態的獲取內容
CSS3的出現使得樣式表的功能變得越來越強大，同樣也使得開發越來越簡單便捷。尤其是CSS3中出現的新特性，如transitions, animations, 和 transforms等，這里面有一個特征雖然不是那么搶眼，但卻是非常的有用，它就是content和attr表達式，它們能在頁面下面悄悄的使用CSS來生成內容，下面讓我們看看 attr 和 content 如何相互配合產生神奇效果的。
基本content用法
content屬性能讓程序員使用CSS往頁面元素里填寫內容
例：
.myDiv:after { content: "我是一個使用*content*屬性生產的靜態文字"; }請注意，如果想讓偽元素:after絕對定位，必須對div設置position: relative
content和attr配合使用
如果不想把content內容在CSS里寫死，那么可以使用attr表達式來從頁面元素中動態的獲取內容：
/* <div data-line="1"></div> */
div[data-line]:after {
content: attr(data-line);
/* 屬性名稱上不要加引號！ */ }attr屬性通常和自定義屬性data-配合使用，因為傳統的其它屬性雖然也能存值，但通常不適合存放表達性文字。
content里的字符串連接操作
這種字符串連接很像常規編程語言：
/* <div data-line="1"></div> */
div[data-line]:after
{ content: "[line " attr(data-line) "]"; }在CSS3中就可以完成像JavaScript里的字符串拼接，另外attr的動態生成頁面內容也是一件很有用的事。我們可以用它配合content對頁面的很多其他元素和屬性進行操作。
關于css3中content和attr屬性的作用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
