极客教程CSS 如何将样式应用于HTML中具有相同类名的不同元素
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 “标签，然后用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>
总结
在这篇文章中，我们学习了如何通过类名来选择HTML元素，以及如何用两种不同的方法对它们应用相同或不同的CSS样式。在第一种方法中，我们使用点(.)选择器来选择具有相同类名的多个元素，并对它们应用相同的样式；在第二种方法中，我们使用HTML标签名后的点(.)选择器来对具有相同类名的元素应用不同的CSS样式。