首頁 >web前端 >css教學 >如何將CSS樣式應用到HTML中具有相同類別名稱的不同元素？

如何將CSS樣式應用到HTML中具有相同類別名稱的不同元素？

WBOY轉載: 2023-09-13 15:45:071029瀏覽

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中具有相同類別名稱的不同元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html 选择器

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：為什麼需要音訊渲染文檔下一篇：為什麼需要音訊渲染文檔

看更多