HTML class 属性

HTML class 属性用于为 HTML 元素指定类。

多个 HTML 元素可以共享同一个类。

class 属性

class 属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。

在下面的示例中，我们有三个 <div> 元素，其 class 属性值为 "city"。这三个 <div> 元素都将根据 head 部分中的 .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> 元素都将根据 head 部分中的 .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>

亲自试一试

提示：class 属性可用于任何 HTML 元素。

注意：类名区分大小写！

提示：您可以在我们的 CSS 教程中学习更多关于 CSS 的知识。

类的语法

要创建一个类，请写一个点号（.）字符，后跟一个类名。然后，在大括号 {} 内定义 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 样式：

实例

<h2 class="city main">伦敦</h2>
<h2 class="city">巴黎</h2>
<h2 class="city">北京</h2>

亲自试一试

不同元素可以共享相同的类

不同的 HTML 元素可以指向相同的类名。

在下面的示例中，<h2> 和 <p> 都指向 "city" 类，并将共享相同的样式：

实例

<h2 class="city">巴黎</h2>
<p class="city">巴黎是法国的首都</p>

亲自试一试

在 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 教程。

本章总结

HTML class 属性为元素指定一个或多个类名
类被 CSS 和 JavaScript 用来选择和访问特定元素
class 属性可用于任何 HTML 元素
类名区分大小写
不同的 HTML 元素可以指向相同的类名
JavaScript 可以使用 getElementsByClassName() 方法访问具有特定类名的元素