在 CSS 中的一個元素中使用多個類

1. 在 CSS 中將多個類分配給一個元素並同時為兩個類設定樣式
2. 在 CSS 中將多個類分配給一個元素並分別為兩個類設定樣式

本教程將介紹在 CSS 中的單個元素中使用多個類的方法。

在 CSS 中將多個類分配給一個元素並同時為兩個類設定樣式

在 HTML 中，我們使用 class 屬性將類分配給元素。我們可以在 HTML 中的所有元素上應用 class，比如 p、h1-h6、a、div 等等。在 CSS 中，我們使用類選擇器 . 選擇具有相應類名的元素，我們可以對其應用樣式。但是在某些情況下，我們希望將多個元素分配給單個類併為這些類設定樣式。在這種情況下，HTML 允許我們為單個元素分配多個類。我們可以在任何元素中編寫由空格分隔的多個類名。CSS 還允許我們通過同時選擇兩個類來設定這些類的樣式。我們可以使用 . 選擇器選擇第一類並再次選擇第二類而不留空格。然後我們可以為選定的類設定樣式。我們可以將兩個以上的類分配給一個元素，並一次將樣式應用於所有類。

例如，在 HTML 中建立三個 p 標籤，併為它們指定類名 first、second 和 first second。請注意，對於第三個類，類名之間保留了一個空格。在 p 標籤之間為三個級別編寫文字 KTM、Honda 和 Kawasaki。在 CSS 中選擇類 first 並將其 color 設定為 orange。同樣，選擇類別 second 並將其設定為 red，最後選擇這兩個類別為 .first.second 並將顏色設定為 green。

在下面的示例中，我們在單個元素中使用了多個類，並一次為這些類設定樣式。

示例程式碼：

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

在 CSS 中將多個類分配給一個元素並分別為兩個類設定樣式

我們可以將多個類分配給單個 HTML 元素並分別設定兩個類的樣式以更有效地編寫 CSS。使用這種方法，我們可以控制應用樣式中的冗餘。我們可以將通用樣式應用於多個類，並將唯一樣式應用於特定類。

例如，在 p 標籤中建立一個類 title 並編寫一些文字。類似地，建立另一個段落標記併為其分配多個類 title text。在段落標籤上寫一些文字。在 CSS 中，選擇 title 類並將 background-color 設定為 skyblue。然後選擇 text 類併為其指定 green 顏色。

在這裡，兩個段落的背景顏色都將設定為天藍色。這是因為我們已經為 title 類設定了背景顏色。而且，兩個段落中都有一個 title 類。但是，第二段只會將其顏色更改為 green，因為我們僅將此樣式應用於 text 類。這種方法使我們能夠為單個元素使用多個類，以將通用樣式和個別樣式應用於元素。通過這種方式，我們可以為單個元素分配多個類，並可以單獨設定類的樣式以編寫高效的 CSS。

示例程式碼：

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}