您不限於每個元素的單個CSS類。
級聯樣式表（CSS）允許您通過掛接應用於該元素的屬性來定義元素的外觀。 這些屬性可以是ID和一個類，並且像所有屬性一樣，它們可以將有用的信息添加到它們所連接的元素。 根據您添加到某個元素的屬性，您可以編寫一個CSS選擇器來應用所需的視覺樣式，以實現該元素和整個網站的外觀。
儘管ID或類都可以用CSS規則來掛鉤，但現代網頁設計方法偏好ID類，部分原因是它們不太具體，並且更易於整體使用。 是的，您仍然會發現許多使用ID的網站，但這些屬性比以前更節省地應用，而類已經接管了現代網頁。
CSS中的單個或多個類？
在大多數情況下，您可以將一個類屬性分配給一個元素，但實際上它們不僅限於您使用ID時的一個類。 雖然一個元素只能擁有一個ID屬性，但您可以絕對地給一個元素多個類，並且在某些情況下，這樣做會使您的頁面更容易風格並且更加靈活！
如果您需要將多個類分配給元素，則可以添加其他類並簡單地將它們與屬性中的空格分開。
例如，這個段落有三個類：
pullquote featured left ”>這將是段落的文字
這會在段落標記上設置以下三個類：
- Pullquote
- 精選
- 剩下
注意這些類值中的每一個之間的空格。 這些空間是將它們設置為不同的單獨的類。 這也是為什麼類名不能包含空格的原因，因為這樣做會將它們設置為單獨的類。
例如，如果使用沒有空格的“pullquote-featured-left”，它將是一個類值，但上面的例子中，這三個詞用空格分隔，將它們設置為單個值。 在決定在網頁上使用哪些類別值時，理解此概念非常重要。
一旦你有了HTML中的類值，你可以將它們分配為CSS中的類並應用你想要添加的樣式。 例如。
.pullquote {...}
.featured {...}
p.left {...}
在這些示例中，CSS聲明和值對將位於花括號內，這些樣式將如何應用於適當的選擇器。
注意 - 如果您將類設置為特定元素 （例如，p.left），則仍然可以將其用作類列表的一部分; 但是，請注意，它只會影響CSS中指定的元素。 換句話說，p.left風格只適用於具有此類的段落，因為您的選擇器實際上是在將其應用於“段落值為'left'的段落”。 相比之下，示例中的其他兩個選擇器並未指定某個元素，因此它們將應用於使用這些類值的任何元素。
多個類的優點
多個類可以更容易地向元素添加特效，而無需為該元素創建全新的樣式。
例如，您可能希望能夠快速向左或向右浮動元素 。 你可以用float：left來編寫左右兩個類： 和float：right; 在他們中。 然後，每當你有一個元素需要向左浮動時，你只需將類“left”添加到它的類列表中。
然而，這裡有一條很好的線路。 請記住，網絡標準決定了風格和結構的分離。 樣式處於CSS時，結構通過HTML進行處理。
如果您的HTML文檔中充滿了所有類名稱（如“紅色”或“左”）的元素，這些名稱指示元素應該如何顯示而不是它們的內容，那麼您正在跨結構和样式之間的界限。 我盡量限制我的非語義類名，因為這個原因。
多個類，語義和JavaScript
使用多個類的另一個優點是它為您提供了更多的交互可能性。
您可以使用JavaScript將新類應用於現有元素，而無需刪除任何初始類。 您還可以使用類來定義元素的語義 。 這意味著您可以添加額外的類來定義該元素在語義上的含義。 這就是微格式的工作原理。
多個類的缺點
在您的元素上使用多個類最大的缺點是它可能會讓他們隨著時間的推移而查看和管理有點笨拙。 確定哪些樣式影響元素以及是否有任何腳本影響元素可能會變得很困難。 今天許多可用的框架，比如Bootstrap，都會大量使用具有多個類的元素。 如果您不小心，該代碼可能非常快速並且很難快速工作。
當你使用多個類時，即使你不打算這樣做，你也可能冒著讓一個類的樣式重寫另一個類的風格的風險。 這樣就很難找出為什麼你的風格不適用，即使它看起來應該如此。
即使將屬性應用於該元素，也需要注意特異性！
通過在Chrome中使用類似網站管理員工具的工具，您可以更輕鬆地了解您的課程如何影響您的風格，並避免出現相互衝突的風格和屬性問題。
Jennifer Krynin的原創文章。 由Jeremy Girard於8/7/17編輯