css3中content和attr屬性有什麼用

CSS3中的content屬性可以透過CSS在頁面元素中填入內容，也可以實作字串連線操作；content和attr配合使用可以從元素中動態的取得內容

【推薦課程：CSS3教學#】

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屬性有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！