CSS中的attr是一個非常有用的CSS函數。通過使用attr函數，我們可以獲取HTML元素中的屬性值，并將其應用到CSS的樣式中。

例如，我們可以使用attr函數來獲取一個圖片的alt屬性，并將其用作圖片旁邊的文本。下面是一個簡單的示例：
HTML代碼：
<div class="image-text" data-alt="A beautiful sunset">
<img src="sunset.jpg" alt="A beautiful sunset">
</div>
CSS代碼：
.image-text::after {
content: attr(data-alt);
}
在這個例子中，我們使用了attr函數來獲取image-text元素的data-alt屬性值，并將這個值應用到::after偽元素上。因此，當鼠標懸停在這個元素上時，就會顯示“美麗的日落”這個文本。

除了用于獲取屬性值之外，attr函數還可以在CSS中用作函數參數。下面是一個例子，我們使用attr函數獲取列表項中的data-order屬性，并將其應用到flexbox中的order屬性中：

HTML代碼：
<ul>
<li data-order="3">第三個項目</li>
<li data-order="2">第二個項目</li>
<li data-order="1">第一個項目</li>
</ul>
CSS代碼：
li {
order: attr(data-order);
}
在這個例子中，我們使用了attr函數將列表項的data-order屬性值應用到CSS的order屬性中。這意味著第三個列表項將排在第一位，第二個列表項將排在第二位，第一個列表項將排在第三位。

總之，attr函數是一個非常有用的CSS函數，可以幫助我們在CSS中獲取HTML元素的屬性值，并將其應用到CSS樣式中。無論您是在開發響應式設計網站、用戶定義的網站還是其他類型的Web項目，都可以使用attr函數來更方便地管理樣式。