数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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>
结论
在本文中，我们了解了如何根据其类名选择 HTML 元素，以及如何使用两种不同的方法为它们应用相同和不同的 CSS 样式。在第一种方法中，我们使用点 (.) 选择器来选择具有相同类名的多个元素，并为它们应用相同的样式，在第二种方法中，我们使用 HTML 标签名称后跟点 (.) 选择器来为具有相同类名的元素应用不同的 CSS 样式。
更新于： 2023 年 2 月 22 日
3K+ 浏览量
广告