HTML class 属性
HTML class 属性用于为 HTML 元素指定一个类。
多个 HTML 元素可以共享同一个类。
使用 class 属性
class 属性通常用于指向样式表中的类名。它也可以被 JavaScript 用来访问和操作具有特定类名的元素。
在下面的示例中，我们有三个 <div> 元素，它们的 class 属性值为“city”。所有这三个 <div> 元素都将根据头部部分 .city 样式定义进行同等样式设置。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
</div>
<div class="city">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
</div>
<div class="city">
<h2>东京</h2>
<p>东京是日本的首都。</p>
</div>
</body>
</html>
自己动手试一试 »
在下面的示例中，我们有两个 <span> 元素，它们的 class 属性值为“note”。这两个 <span> 元素都将根据头部部分 .note 样式定义进行同等样式设置。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>我的 <span class="note">重要</span> 标题</h1>
<p>这是<span class="note">重要</span>的文本。</p>
</body>
</html>
自己动手试一试 »
类的语法
创建类；写入一个句点（.）字符，后跟一个类名。然后，在花括号 {} 中定义 CSS 属性。
示例
创建一个名为“city”的类
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p>
<h2 class="city">东京</h2>
<p>东京是日本的首都。</p>
</body>
</html>
自己动手试一试 »
多个类
HTML 元素可以属于多个类。
要定义多个类，请用空格分隔类名，例如 <div class="city main">。该元素将根据所有指定的类进行样式设置。
在下面的示例中，第一个 <h2> 元素同时属于 city 类和 main 类，并将应用这两个类的 CSS 样式：
不同的元素可以共享同一个类
不同的 HTML 元素可以指向同一个类名。
在下面的示例中，<h2> 和 <p> 都指向“city”类，并将共享相同的样式。
在 JavaScript 中使用 class 属性
类名也可以被 JavaScript 用来为特定元素执行某些任务。
JavaScript 可以使用 getElementsByClassName() 方法来访问具有特定类名的元素。
示例
点击按钮以隐藏所有类名为“city”的元素
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
自己动手试一试 »
如果你不理解上面的代码，请不用担心。
你将在我们的 HTML JavaScript 章中了解更多关于 JavaScript 的知识，或者你可以学习我们的 JavaScript 教程。
Chapter Summary
- HTML
class属性为元素指定一个或多个类名。 - 类名用于 CSS 和 JavaScript 来选择和访问特定元素。
class属性可用于任何 HTML 元素。- 类名区分大小写。
- 不同的 HTML 元素可以指向同一个类名。
- JavaScript 可以使用
getElementsByClassName()方法来访问具有特定类名的元素。
视频：HTML Class
