如何同時應用樣式到多個類?


為了同時應用樣式到多個類,我們將使用點(.) 選擇器和逗號(,)。在本文中,我們將使用點(.) 選擇器並使用選擇器選擇所有具有其類名的元素,並用逗號(,) 分隔。

“類”是一個 HTML 屬性,它接受用空格分隔的類列表。然後,這些類可以在 CSS 中用於設定特定元素的樣式,或者在 Javascript 中用於操作這些 HTML 元素。

示例 1

在這個例子中,我們將把字型顏色“紅色”應用於具有“header”和“para”類的 HTML 元素。我們將使用點(.) 選擇器並將它們與逗號(,) 連線來實現這一點。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply styles to multiple classes at once?</title>
   <style>
      .header, .para {
         color: red;
      }
   </style>
</head>
<body>
   <h3 class="header">How to apply styles to multiple classes at once?</h3>
   <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>

示例 2

在這個例子中,我們將把字型顏色“綠色”和字型樣式“斜體”應用於具有“header”和“para”類的 HTML 元素。我們將使用點(.) 選擇器並將它們與逗號(,) 連線來實現這一點。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply styles to multiple classes at once??</title>
   <style>
      .header, .para {
         color: green;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h3class="header">How to apply styles to multiple classes at once?</h3>
   <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>

結論

在本文中,我們學習瞭如何同時應用多個 CSS 類。我們首先使用 CSS 提供的點(.) 選擇器一次選擇多個類,然後在樣式表中為它們分配所需的樣式。

更新於:2023年2月22日

3K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.