在Web開發過程中，我們通常需要根據數據的不同展示不同的樣式。CSS是控制網頁樣式的重要組成部分，通過其中的各種選擇器和屬性，可以實現豐富多樣的樣式效果。下面我們來介紹一下如何根據數據顯示樣式。

/* 假設我們有一個包含數字的div元素 */
<div class="data">3</div>
/* 我們可以為該元素添加如下的CSS樣式 */
.data {
font-size: 24px; /* 設置字體大小為24像素 */
color: #f00; /* 設置文字顏色為紅色 */
text-align: center; /* 設置文字居中對齊 */
background-color: #ccc; /* 設置背景色為灰色 */
}

上述的CSS樣式會使得包含數字的div元素顯示出較大、居中、紅色字體，背景色為灰色。但是，如果我們想根據具體的數據顯示不同的樣式，該怎么辦呢？這就需要利用CSS中的一些動態選擇器和屬性了。

/* 假設我們有如下的HTML代碼 */
<ul>
<li class="item" data-num="4">4</li>
<li class="item" data-num="7">7</li>
<li class="item" data-num="2">2</li>
</ul>
/* 我們可以為每個li元素添加如下CSS樣式 */
.item {
font-size: 16px;
text-align: center;
padding: 4px;
}
/* 利用動態屬性選擇器和偽類選擇器來設置不同的樣式 */
.item[data-num="4"]:before {
content: "★"; /* 用★字符替換實際數字 */
color: #ff0; /* 星號顏色為黃色 */
}
.item[data-num="7"]:before {
content: "★★★"; /* 用多個星號表示較大數字 */
color: #f00; /* 多個星號顏色為紅色 */
}
.item[data-num="2"]:before {
content: "☆"; /* 用☆字符替換實際數字 */
color: #aaa; /* 星號顏色為灰色 */
}

上述CSS代碼會使得數字4的li元素顯示一個黃色的★星號，數字7的li元素顯示三個紅色的★星號，數字2的li元素顯示一個灰色的☆星號。這樣，我們就可以根據具體的數據來展示不同的樣式了。