本文目錄導讀：

1. 使用不同的類名
2. 使用內(nèi)聯(lián)樣式
3. 使用CSS偽類和屬性選擇器

CSS樣式在網(wǎng)頁設計中扮演著***關重要的角色，它負責定義網(wǎng)頁的外觀和格式，有時我們需要對同一個HTML標簽應用不同的樣式，以滿足設計需求，本文將介紹幾種常見的方法來實現(xiàn)這一目標。

使用不同的類名

我們可以通過為同一個HTML標簽分配不同的類名，然后在CSS中為每個類定義不同的樣式，對于<div>標簽，我們可以這樣操作：

HTML代碼：

<div class="style1">樣式一</div>
<div class="style2">樣式二</div>

CSS代碼：

.style1 {
  /* 樣式一的屬性 */
}
.style2 {
  /* 樣式二的屬性 */
}

使用內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式是直接應用于HTML元素的樣式，雖然這種方法不推薦用于大型項目，但對于簡單的需求，它非常實用。

HTML代碼：

<div style="color: red;">紅色文字</div>
<div style="color: blue;">藍色文字</div>

使用CSS偽類和屬性選擇器

CSS偽類和屬性選擇器允許我們根據(jù)元素的特定狀態(tài)或屬性應用不同的樣式，我們可以使用:hover偽類來改變鼠標懸停時的樣式，我們還可以根據(jù)元素的屬性（如特定的ID或數(shù)據(jù)屬性）來應用樣式，這些方法使得我們可以更加***地控制樣式應用。

四、使用媒體查詢（Media Queries）實現(xiàn)響應式設計

媒體查詢是CSS3的一個功能，允許***根據(jù)設備的特定條件（如屏幕尺寸、方向等）應用不同的樣式，這對于創(chuàng)建響應式布局非常有用，通過使用媒體查詢，我們可以為同一標簽在不同設備上應用不同的樣式。

CSS代碼：

/* 默認樣式 */
div { /* ... */ } 
/* 針對大屏幕設備的樣式 */ 
@media screen and (min-width: 600px) { 
  div { /* ... */ } 
} 
/* 針對小屏幕設備的樣式 */ 
@media screen and (max-width: 600px) { 
  div { /* ... */ } 
} 
``` 通過不同的方法，我們可以對同一個HTML標簽應用不同的CSS樣式，這些方法包括使用不同的類名、內(nèi)聯(lián)樣式、CSS偽類和屬性選擇器以及媒體查詢等，在實際開發(fā)中，我們可以根據(jù)具體需求和場景選擇合適的方法來實現(xiàn)目標。