CSS中的data屬性是一種非常有用的屬性，它可以讓我們為一個元素添加自定義的數據。這些數據可以通過JavaScript來獲取和修改，非常方便。

<div data-id="123" data-name="John"></div>

如上面的代碼所示，我們可以為一個元素添加多個data屬性，其中data-后跟著我們自定義的名稱，可以是任意字符串。在JavaScript中，我們可以通過使用getAttribute()或dataset屬性來獲取這些值。

// 獲取data-id的值
const idValue = document.querySelector('div').getAttribute('data-id');
// 獲取所有data屬性的值
const data = document.querySelector('div').dataset;
// 獲取指定data屬性的值
const nameValue = document.querySelector('div').dataset.name;

在CSS中，我們也可以使用data屬性來對元素進行選擇和樣式調整。我們使用屬性選擇器[data-*]來選取具有特定data屬性的元素，如下所示：

// 選擇所有具有data-id屬性的元素
div[data-id] {
/* 樣式 */
}
// 選擇data-id為123的元素
div[data-id="123"] {
/* 樣式 */
}
// 選擇data-name以J開頭的元素
div[data-name^="J"] {
/* 樣式 */
}

通過使用CSS的data屬性，我們可以更好地組織和管理我們的代碼，使其更清晰、更易于維護。