如何在HTML中为具有相同类名的不同元素应用CSS样式

HTML类是全局属性，被HTML标签用来指定一个大小写敏感的类名列表。这些类名通过CSS来应用样式于具有该类名的特定标签，并通过Javascript来操作HTML元素的行为、交互性或样式。

方法1：使用点（.）选择器

在这种方法中，我们将简单地使用点（.）选择器来选择具有相同类名的多个元素，并使用CSS为它们应用相同的样式。

示例

在本示例中，我们将通过它们的类名选择一个“p”标签和一个“span”HTML标签，并使用CSS将它们的文本颜色设置为“红色”。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply CSS style to the different elements having the same class name in HTML?</title>
   <style>
      .sample {
         color: red;
      }
   </style>
</head>
<body>
   <p class="sample">This is p tag content!</p>
   <span class="sample">This is span tag content!</span>
</body>
</html>

方法2：使用“p”标签和“span”HTML标签

在这种方法中，我们将使用CSS为具有相同类名的元素应用不同的样式。为此，我们将使用HTML标签名称，后跟点（.）选择器来选择特定的元素，并为其提供所需的CSS样式。

示例

在这个示例中，我们将使用它们的类选择一个“p”标签和一个“span”HTML标签，并使用CSS为它们提供不同的文本颜色。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply CSS style to the different elements having the same class name in HTML?</title>
   <style>
      p.sample {
         color: red;
      }
      span.sample {
         color: green;
      }
   </style>
</head>
<body>
   <p class="sample">This is p tag content!</p>
   <span class="sample">This is span tag content!</span>
</body>
</html>