如何同時將樣式套用到多個類別？-css教學-PHP中文網

Example 2

結論

首頁

web前端

css教學

如何同時將樣式套用到多個類別？

王林

Aug 19, 2023 am 09:33 AM

How to apply styles to multiple classes at once?

For Applying Styles to Muitliple classes at once we are going to use dot(.) selector and comma(,). In this article, we will use the dot (.) selector and select all the elements with their class names using the selector and separated by a comma (,).

「class」是一個HTML屬性，它接受由空格分隔的類別清單。這些類別可以在CSS中用於為特定元素設定樣式，或在javascript中用於操作這些HTML元素。

Example 1

In this example, we will apply the font color “red” to the HTML elements that have classes “header” and “para”. We will achieve this using the dot (.) selector and concatenating them with a comma (, ).

<!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>

登入後複製

Example 2

在這個範例中，我們將把字體顏色設為「green」並將字體樣式設定為「italic」套用到具有類別名稱「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>

登入後複製

結論

In this article, we learned how to apply multiple CSS classes at once. We did this by first, selecting multiple classes at once, using the dot (.) selector provided by the the CSS, and then assigning them the quired them thes thes in CSS, and then assigning them the CSS the stylesheet.

以上是如何同時將樣式套用到多個類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn