HTML class 属性

HTML 的 class 属性用于指定 HTML 元素类，以应用对应的 CSS 类选择器中定义的样式。

CSS 中的类选择器是对一类元素的样式的定义，可以应用到多个 HTML 元素中。

一个 HTML 元素 class 属性中也可以设置多个类，用空格分隔开。

使用 `class` 属性

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

在下面的示例中，我们有三个 <div> 元素，它们的 class 属性值都是 city, 其对应了 <head> 部分中 <style> 样式表中定义的 .city 类，最终的结果是三个 <div> 的样式是一致的。

<!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，两个元素的样式相同。

<!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 属性。这样就定义好了一个类。

创建一个名为 city 的类：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .city {
        background-color: tomato;
        color: white;
        padding: 10px;
      }
    </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>

一个元素多个类

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

总结

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