CSS 如何同时应用样式到多个类

要同时应用样式到多个类，我们将使用点(.)选择器和逗号(,)。在这篇文章中，我们将使用点(.)选择器，通过逗号(,)将具有类名的所有元素选择出来。

“类”是一个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

在这个示例中，我们将应用“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>