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


为了同时应用样式到多个类,我们将使用点(.) 选择器和逗号(,)。在本文中,我们将使用点(.) 选择器并使用选择器选择所有具有其类名的元素,并用逗号(,) 分隔。

“类”是一个 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+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告