在CSS中，一個(gè)元素可以同時(shí)擁有多個(gè)class，這樣就可以為同一個(gè)元素同時(shí)定義多個(gè)樣式。

這是一個(gè)多class樣式的元素

如上所示，一個(gè)元素可以同時(shí)擁有名為“blue”和“text-center”的兩個(gè)class，定義了它的顏色和文本的居中顯示。具有多個(gè)class的元素應(yīng)該盡量避免對(duì)同一個(gè)屬性定義多個(gè)不同的值，否則會(huì)引起樣式的沖突。

這里的文本顏色是藍(lán)色，但是居中屬性被覆蓋了

如上所示，由于對(duì)居中屬性同時(shí)指定了“text-center”和“text-left”兩個(gè)class，后者的樣式會(huì)覆蓋前者，導(dǎo)致文本居左而非居中。

因此，在設(shè)計(jì)多class樣式時(shí)，應(yīng)該遵循以下原則：

• 避免在同一個(gè)屬性上定義多個(gè)不同的值；
• 盡量選擇更具體的class來定義樣式，如使用類名“.header h1”而不是只是“h1”，這樣可以避免樣式的沖突。

當(dāng)然，多class的應(yīng)用并不限于樣式的定義，還可應(yīng)用于JavaScript的操作中，如為元素添加或移除class來實(shí)現(xiàn)特定的交互效果等。

<div id="myDiv" class="off"></div>
// JavaScript代碼
var myDiv = document.getElementById("myDiv");
myDiv.classList.add("on"); // 添加class“on”，元素變?yōu)榭梢姞顟B(tài)
myDiv.classList.remove("off"); // 移除class“off”

如上所示，通過JavaScript代碼實(shí)現(xiàn)為一個(gè)id為“myDiv”的元素添加或移除class，從而改變?cè)氐臓顟B(tài)。

綜上所述，多class樣式在CSS中有其重要的應(yīng)用，應(yīng)該掌握好相關(guān)技巧，以獲得更好的頁面效果。