如何將多個 CSS 類別套用到單一 HTML 元素以實現自訂樣式？

單一元素上的多個 CSS 類別

在 HTML 和 CSS 中，可以將多個類別應用於單一 HTML 元素。這允許元素樣式具有更大的靈活性和自訂性。

在給定的範例中，目標是使用 CSS 類別建立兩個具有不同樣式的社交圖示：一個頂部填充為零，另一個沒有底部邊框。但是，提供的程式碼包含錯誤。

了解問題

提供的程式碼有兩個問題：

1. HTML 元素有兩個類別屬性(class="social" >)，這是不正確的。在 HTML 中，一個元素只能有一個類別屬性。
2. .social .first 和 .social .last 的 CSS 規則並非針對預期元素。

修正程式碼

要修正問題，請將 HTML 和 CSS修改如下：

HTML

<div class="social first"> <!-- Combine classes in a single class attribute -->
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

CSS

.social.first {
    padding-top: 0;
}

.social.last {
    border-bottom: none;
}

CSS

說明🎜>

在修正後的程式碼：
• HTML 元素現在有一個類別屬性，兩個類別名稱之間用空格分隔。

CSS 規則目標元素同時帶有 .social 和 .first 或 .使用類別連結語法的最後一個類別（.social.first 和.social.last)。

示範

請參考以下JSFiddle 進行工作示範：https://jsfiddle.net/tybro0103/covbtpaq/

以上是如何將多個 CSS 類別套用到單一 HTML 元素以實現自訂樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！