資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中為具有相同類名的不同元素應用 CSS 樣式？
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 樣式。
更新於： 2023 年 2 月 22 日
3K+ 瀏覽量
廣告