本文目錄導(dǎo)讀：

1. 通過內(nèi)聯(lián)樣式添加 CSS
2. 通過 CSS 類添加樣式
3. 通過 CSS 選擇器添加樣式

為三個不同的<li> 元素分別添加 CSS 樣式

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要對列表元素<li> 進(jìn)行樣式定制，以使其更符合整體頁面風(fēng)格和用戶體驗，當(dāng)你有三個<li> 元素需要分別添加不同的 CSS 樣式時，可以通過以下步驟實現(xiàn)。

通過內(nèi)聯(lián)樣式添加 CSS

內(nèi)聯(lián)樣式是直接在 HTML 元素中添加style 屬性來定義 CSS 樣式，如果你有三個<li> 元素，可以分別為它們添加不同的內(nèi)聯(lián)樣式。

<ul>
  <li style="color: red; font-size: 16px;">***個列表項</li>
  <li style="background-color: #f0f0f0; padding: 10px;">第二個列表項</li>
  <li style="font-weight: bold; text-decoration: underline;">第三個列表項</li>
</ul>

通過 CSS 類添加樣式

使用 CSS 類是更常見和推薦的方式，因為它使 HTML 和 CSS 分離，更易于管理和維護(hù)，在 CSS 中定義不同的類，然后在 HTML 中為<li> 元素分別應(yīng)用這些類。

/* 在 CSS 中定義類 */
.red-text {
  color: red;
}
.gray-background {
  background-color: #f0f0f0;
  padding: 10px;
}
.bold-underline {
  font-weight: bold;
  text-decoration: underline;
}

然后在 HTML 中應(yīng)用這些類：

<ul>
  <li class="red-text">***個列表項</li>
  <li class="gray-background">第二個列表項</li>
  <li class="bold-underline">第三個列表項</li>
</ul>

通過 CSS 選擇器添加樣式

除了內(nèi)聯(lián)樣式和類選擇器，你還可以使用 CSS 選擇器（如屬性選擇器、偽類選擇器等）來為特定的<li> 元素添加樣式，這種方式適用于更復(fù)雜的樣式需求或基于特定條件的樣式應(yīng)用。

/* 使用屬性選擇器 */
ul li[data-style="red"] {
  color: red;
}

然后在 HTML 中應(yīng)用這個屬性：

<ul>
  <li data-style="red">***個列表項</li> <!-- 應(yīng)用紅色字體 -->
  <!-- 其他列表項 -->
</ul>

為三個不同的<li> 元素分別添加 CSS 樣式可以通過內(nèi)聯(lián)樣式、CSS 類和 CSS 選擇器來實現(xiàn)，選擇合適的方式取決于你的具體需求和頁面結(jié)構(gòu)。