CSS中的data屬性值是一個非常有用的屬性，它可以讓開發者將任意的數據附加到一個特定的HTML元素上，從而實現更為靈活的樣式控制。

在HTML元素上添加data屬性值非常簡單，只需要在對應的標簽中使用data-*的格式就可以了，其中星號代表具體的屬性名，如下所示：

<div data-id="001">這是一個帶有data-id屬性的div元素</div>

此時，這個div元素就擁有了一個名為data-id的屬性，它的值為001。

在CSS中，我們可以使用attr()函數來獲取這些data屬性值，然后將它們用于樣式定義。

div::before {
content: attr(data-id);
}

這樣，我們就可以在這個div元素的前面添加一個偽元素，其中的content屬性的值將顯示這個元素的data-id屬性的值。

除了用于樣式控制以外，data屬性值還可以用于JavaScript代碼中，我們可以使用dataset屬性來訪問這些屬性值：

var div = document.querySelector('div');
console.log(div.dataset.id); // "001"

通過以上的代碼，我們就可以輕松地獲取到這個div元素上的data-id屬性的值。

總之，CSS中的data屬性值為我們帶來了更多靈活的控制方式，無論是樣式控制還是JavaScript代碼中的數據操作都能夠得到很好的應用。