CSS代碼中data屬性使得我們可以為元素添加自定義數據。這些數據可以很方便地在JavaScript中使用，但不能在CSS中直接使用。

/*當我們在HTML中使用data屬性:*/
<p data-color="red">This is some text.</p>
/*要使用CSS selector來獲取這個元素:*/
p[data-color="red"] {
color: red;
}

在這個例子中，我們使用了一個data屬性來給一個段落元素添加了一個自定義的顏色數據。我們之后在CSS代碼中使用了屬性選擇器來選取這個元素，并且在這個元素上應用了一個紅色的顏色。

我們也可以在CSS中使用偽元素選擇器來提取一個元素的data屬性:

/*使用屬性content中的data屬性*/
p::before {
content: attr(data-color);
}

在這個例子中，通過使用一個偽元素，我們展示了一個元素的data屬性值。在這里，我們不再使用屬性選擇器，而是使用了attr()來訪問到元素的data屬性。我們同時也把這個屬性的值賦給了屬性content。這使得我們可以將我們的自定義數據添加到元素的內容上。

總而言之，使用CSS中的data屬性可以增強我們對元素的控制。它們允許我們為我們的元素添加更多的個性化的數據，這些數據可以在JavaScript和CSS中訪問到。這讓我們可以更加精細地定義我們的樣式和行為，從而更好地滿足我們的業務要求。