HTML 類是 HTML 標記使用的全局屬性，用于指定本質上區分大小寫的類列表。然后，CSS 使用這些類將樣式應用到具有該類的特定標記，并由 Javascript 使用這些類來操作 HTML 元素的行為、交互性或樣式。
方法1；使用點(.)選擇器
在這種方法中，我們將簡單地使用點 (.) 選擇器來選擇具有相同類名的多個元素，并使用 CSS 對它們應用相同的樣式集。
示例
在此示例中，我們將使用它們的類選擇“p”標簽和“span”HTML 標簽，并使用 CSS 為它們指定文本顏色“紅色”。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply CSS style to the different elements having the same class name in HTML?</title>
<style>
.sample {
color: red;
}
</style>
</head>
<body>
<p class="sample">This is p tag content!</p>
<span class="sample">This is span tag content!</span>
</body>
</html>
登錄后復制
方法 2：使用“p”標簽和“span”HTML 標簽
在這種方法中，我們將使用 CSS 對具有相同類名的元素應用一組不同的樣式。為此，我們將使用 HTML 標簽名稱，后跟點 (.) 選擇器來選擇特定元素并為其提供所需的 CSS 樣式。
示例
在此示例中，我們將使用它們的類選擇“p”標簽和“span”HTML 標簽，并使用 CSS 為它們提供不同的文本顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply CSS style to the different elements having the same class name in HTML?</title>
<style>
p.sample {
color: red;
}
span.sample {
color: green;
}
</style>
</head>
<body>
<p class="sample">This is p tag content!</p>
<span class="sample">This is span tag content!</span>
</body>
</html>
登錄后復制
結論
在本文中，我們了解了如何從類名稱中選擇 HTML 元素，以及如何使用兩種不同的方法對它們應用相同和不同的 CSS 樣式。在第一種方法中，我們使用點 (.) 選擇器來選擇具有相同類名的多個元素，并對它們應用相同的樣式。在第二種方法中，我們使用 HTML 標簽名稱后跟點 (.) 選擇器將不同的 CSS 樣式應用于具有相同類名的元素。
以上就是如何將CSS樣式應用到HTML中具有相同類名的不同元素？的詳細內容，更多請關注www.92cms.cn其它相關文章！
