在CSS中，attr是一個很有用的函數(shù)，它可以從HTML元素的屬性中獲取值并將其用于樣式表中的其他屬性。在這篇文章中，我們將介紹attr在CSS中的使用方法和一些實例，以幫助您更好地了解它的作用。

/*
語法格式：
元素名::before {
content: attr(屬性名);
}
*/
/* 實例1：通過attr()函數(shù)改變元素的文本內(nèi)容 */
h2::before {
content: attr(data-title);
}
原本的內(nèi)容將被attr()函數(shù)替代
/* 實例2：使用attr()函數(shù)設(shè)置元素的背景圖像 */
div {
background-image: url(attr(data-bg));
width: 200px;
height: 200px;
}
/* 實例3：使用attr()函數(shù)設(shè)置input的占位符 */
input[type="text"]::placeholder {
content: attr(data-placeholder);
}/* 實例4：使用attr()函數(shù)設(shè)置自定義屬性作為CSS屬性 */
div::after {
content: attr(data-custom);
font-size: 16px;
color: attr(data-color); /* 將data-color屬性的值作為顏色值 */
}

總之，attr函數(shù)可以以一種非常便捷的方式將HTML的屬性值集成到CSS樣式中。這使得開發(fā)人員能夠使用更為動態(tài)和靈活的界面設(shè)計，同時大大減少代碼量。