如何一次性将样式应用于多个类?

cssweb developmentfront end technology更新于 2025/1/24 2:52:17

为了一次性将样式应用于多个类，我们将使用点 (.) 选择器和逗号 (,)。在本文中，我们将使用点 (.) 选择器，并使用选择器选择所有带有类名的元素，并用逗号 (,) 分隔。

"class"是一个 HTML 属性，它接受以空格分隔的类列表。这些类随后可用于 CSS 中为特定元素设置样式，或用于 JavaScript 中操作这些 HTML 元素。

示例 1

在此示例中，我们将字体颜色"red"应用于具有类"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 元素应用字体颜色"green"和字体样式"italic"。我们将使用点 (.) 选择器并用逗号 (,) 连接它们来实现此目的。

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