HTML 类

2025 年 8 月 12 日 | 阅读 5 分钟

HTML class 属性用于为 HTML 元素指定一个或多个类名。类名可以被 CSS 和 JavaScript 用于为 HTML 元素执行某些任务。您可以在 CSS 中使用一个点 (.) 字符，后跟类名来选择元素。

class 属性可以在 <style> 标签内定义，也可以在单独的文件中使用 (.) 字符定义。

在 HTML 文档中，我们可以将相同的 class 属性名称用于不同的元素。

定义 HTML class

要声明一个 CSS 类，您可以在 HTML 文档的 <head> 部分使用 <style> 标签，或者在 <body> 中内联演示。在生产环境中，请使用外部 CSS 文件。

<head>
	<style>
		.headings{ 
			color: lightgreen;
			font-family: cursive;
			background-color: black; }
	</style>
</head>

我们已经为名为“headings”的类定义了样式，并且可以将此类名用于任何我们想要应用此类样式的 HTML 元素。我们只需遵循以下语法即可使用它。

要在您的 HTML 中使用指定的类，请将 class 属性添加到任何元素。

示例 1

<!DOCTYPE html>
<html>
<head>
	<style>
		.headings{ 
			color: lightgreen;
			font-family: cursive;
			background-color: black; }
	</style>
</head>
<body>
<h1 class="headings">This is first heading</h1>
<h2 class="headings">This is Second heading</h2>
<h3 class="headings">This is third heading</h3>
<h4 class="headings">This is fourth heading</h4>
</body>
</html>

执行代码

输出

使用不同类名的另一个示例

让我们用 CSS 的“fruit”类名来举另一个例子，以样式化所有元素。

示例

让我们用 CSS 的“Fruit”类名来样式化所有元素。

<style>  
.fruit {  
    background-color: orange;  
    color: white;  
    padding: 10px;  
}   
</style>  
  
<h2 class="fruit">Mango</h2>  
<p>Mango is king of all fruits.</p>  
  
<h2 class="fruit">Orange</h2>  
<p>Oranges are full of Vitamin C.</p>  
  
<h2 class="fruit">Apple</h2>  
<p>An apple a day, keeps the Doctor away.</p>  

执行代码

输出

在这里，您可以看到我们使用了“fruit”类名和 (.) 来使用其所有元素。

注意：您可以在任何 HTML 元素上使用 class 属性。类名是区分大小写的。

JavaScript 中的 Class 属性

您可以使用 JavaScript 通过 getElementsByClassName() 方法访问具有指定类名的元素。

当用户单击按钮时，让我们隐藏所有类名为“fruit”的元素。

示例

<!DOCTYPE html>  
<html>  
<body>  
  
<h2>Class Attribute with JavaScript</h2>  
<p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>  
  
<button onclick="myFunction()">Hide elements</button>  
  
  
<h2 class="fruit">Mango</h2>  
<p>Mango is king of all fruits.</p>  
  
<h2 class="fruit">Orange</h2>  
<p>Oranges are full of Vitamin C.</p>  
  
<h2 class="fruit">Apple</h2>  
<p>An apple a day, keeps the Doctor away.</p>  
  
<script>  
function myFunction() {
  const elements = document.getElementsByClassName("fruit");
  for (let el of elements) {
    el.style.display = "none"; // or use el.classList.add("hidden") with a .hidden { display: none; } style
  }
}
</script>  
  
</body>  
</html>  

执行代码

输出

单击“隐藏元素”按钮后，输出将是

多个类

您可以在 HTML 元素中使用多个类名（一个以上）。这些类名必须用空格分隔。

让我们对类名为“fruit”且类名为“center”的元素进行样式设置。

示例

<!DOCTYPE html>  
<html>  
<style>  
.fruit {  
    background-color: orange;  
    color: white;  
    padding: 10px;  
}   
  
.center {  
    text-align: center;  
}  
</style>  
<body>  
  
<h2>Multiple Classes</h2>  
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>  
  
<h2 class="fruit center">Mango</h2>  
<h2 class="fruit">Orange</h2>  
<h2 class="fruit">Apple</h2>  
  
</body>  
</html>  

执行代码

输出

您可以看到第一个元素

同时属于“fruit”类和“center”类。

相同类名，不同标签

您可以将相同的类名用于不同的标签，如 <h2> 和 <p> 等，以共享相同的样式。

示例

<!DOCTYPE html>  
<html>  
<style>  
.fruit {  
  background-color: orange;  
  color: white;  
  padding: 10px;  
}   
</style>  
<body>  
<h2>Same Class with Different Tag</h2>  
<h2 class="fruit">Mango</h2>  
<p class="fruit">Mango is the king of all fruits.</p>  
</body>  
</html>

执行代码

输出

注意：class 属性仅用于样式和脚本。当它没有与语义元素或 ARIA 属性结合使用时，它对可访问性没有影响。

使用外部 CSS 和 Class 属性

除了 <style> 标签内的样式，您还可以将基于类的样式创建在外部 CSS 文件中，并通过 <link> 标签在 HTML 文档中引用它。

示例

styles.css

.fruit {
  background-color: orange;
  color: white;
  padding: 10px;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h2 class="fruit"> Mango </h2>
<p class="fruit"> Mango is the king of fruits. </p>

</body>
</html>

输出

注意：外部 CSS 可帮助您维护清晰、可重用且可维护的代码，尤其是在大型网站上。

使用带有类的元素选择器

组合选择器允许您使用类在 CSS 中精确分类项。例如，您可能希望仅样式化特定类的 <p> 标签

p.fruit {
  font-style: italic;
  font-size: 18px;
}

输出

这只会影响具有 fruit 类的 <p> 标签，而不是 headings 和 divs。

JavaScript：现代选择器替代方案

您可以使用 document.querySelectorAll()，它返回一个静态 NodeList 并接受更灵活的选择器，而不是使用 getElementsByClassName()，后者返回一个活动的 HTMLCollection。

示例

document.querySelectorAll(".fruit").forEach(el => {
  el.style.display = "none";
});

输出

Mango is the king of fruits.

它更简洁，并且与 forEach 等现代 JavaScript 方法配合使用。

class 与 id

当多个元素需要相同的样式或行为时，请使用 class。
对于页面上单个且唯一的元素，请使用 id。

属性	唯一的？	使用方	语法
class	不能	CSS & JS	.classname
id	是的	CSS & JS	#idname

示例

<h2 class="fruit"> Apple </h2>
<p id="description"> Apples are nutritious. </p>

结论

HTML class 属性灵活且有用，它允许开发人员通过 CSS 和 JavaScript 对各种元素使用相同的样式和行为。无论是在线定义样式、外部定义还是组合类，学习如何组织和使用类名对于清晰、可维护和可扩展的 Web 开发至关重要。

学习如何使用和利用类选择器以及它们如何与脚本和样式交互，您可以更精确地控制网页的设计和交互性。

下一个主题HTML Id 属性

HTML 类

定义 HTML class

示例 1

使用不同类名的另一个示例

示例

注意：您可以在任何 HTML 元素上使用 class 属性。类名是区分大小写的。

JavaScript 中的 Class 属性

示例

多个类

示例

同时属于“fruit”类和“center”类。

相同类名，不同标签

示例

使用外部 CSS 和 Class 属性

示例

注意：外部 CSS 可帮助您维护清晰、可重用且可维护的代码，尤其是在大型网站上。

使用带有类的元素选择器

JavaScript：现代选择器替代方案

class 与 id

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 类

定义 HTML class

示例 1

使用不同类名的另一个示例

示例

注意：您可以在任何 HTML 元素上使用 class 属性。类名是区分大小写的。

JavaScript 中的 Class 属性

示例

多个类

示例

同时属于“fruit”类和“center”类。

相同类名，不同标签

示例

使用外部 CSS 和 Class 属性

示例

注意：外部 CSS 可帮助您维护清晰、可重用且可维护的代码，尤其是在大型网站上。

使用带有类的元素选择器

JavaScript：现代选择器替代方案

class 与 id

结论

相关帖子

HTML iframe

HTML 与 CSS

HTML 表格

HTML 标题

HTML 图片

HTML 实体

HTML 构建块

HTML 布局

HTML 教程

HTML 布局技术

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器