您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css3中content和attr屬性的作用,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
CSS3中的content屬性可以通過CSS在頁面元素中填寫內(nèi)容,還可以實(shí)現(xiàn)字符串連接操作;content和attr配合使用可以從元素中動(dòng)態(tài)的獲取內(nèi)容
CSS3的出現(xiàn)使得樣式表的功能變得越來越強(qiáng)大,同樣也使得開發(fā)越來越簡(jiǎn)單便捷。尤其是CSS3中出現(xiàn)的新特性,如transitions, animations, 和 transforms等,這里面有一個(gè)特征雖然不是那么搶眼,但卻是非常的有用,它就是content和attr表達(dá)式,它們能在頁面下面悄悄的使用CSS來生成內(nèi)容,下面讓我們看看 attr 和 content 如何相互配合產(chǎn)生神奇效果的。
基本content用法
content屬性能讓程序員使用CSS往頁面元素里填寫內(nèi)容
例:
.myDiv:after { content: "我是一個(gè)使用*content*屬性生產(chǎn)的靜態(tài)文字"; }
請(qǐng)注意,如果想讓偽元素:after絕對(duì)定位,必須對(duì)div設(shè)置position: relative
content和attr配合使用
如果不想把content內(nèi)容在CSS里寫死,那么可以使用attr表達(dá)式來從頁面元素中動(dòng)態(tài)的獲取內(nèi)容:
/* <div data-line="1"></div> */ div[data-line]:after { content: attr(data-line); /* 屬性名稱上不要加引號(hào)! */ }
attr屬性通常和自定義屬性data-配合使用,因?yàn)閭鹘y(tǒng)的其它屬性雖然也能存值,但通常不適合存放表達(dá)性文字。
content里的字符串連接操作
這種字符串連接很像常規(guī)編程語言:
/* <div data-line="1"></div> */ div[data-line]:after { content: "[line " attr(data-line) "]"; }
在CSS3中就可以完成像JavaScript里的字符串拼接,另外attr的動(dòng)態(tài)生成頁面內(nèi)容也是一件很有用的事。我們可以用它配合content對(duì)頁面的很多其他元素和屬性進(jìn)行操作。
關(guān)于css3中content和attr屬性的作用就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。