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

首頁

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 id="How-to-apply-styles-to-multiple-classes-at-once">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>
   <h3 id="How-to-apply-styles-to-multiple-classes-at-once">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中文網其他相關文章！

陳述

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