HTML class 属性
HTML class 属性用于为 HTML 元素指定一个类。
多个 HTML 元素可以共享同一个类。
使用类属性
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 中使用类属性
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 教程。
本章总结
- HTML
class属性为元素指定一个或多个类名。 - CSS 和 JavaScript 使用类来选择和访问特定元素。
class属性可以用于任何 HTML 元素。- 类名区分大小写。
- 不同的 HTML 元素可以指向同一个类名。
- JavaScript 可以使用
getElementsByClassName()方法访问具有特定类名的元素。
视频: HTML 类
