轻松上手,快乐学习!

HTML 类属性


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元素。

注释: 类名区分大小写!


Class 的语法

创建一个类;写一个句点(.) 字符,后跟一个类名。然后,在大括号 {} 中定义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 的内容。


本章小结

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

HTML 实验

学习训练

练习题:

创建一个名为 "special" 的类选择器。

在 "special" 类中添加一个值为 "blue" 的颜色属性。

<!DOCTYPE html>
<html>
<head>
<style>

  ;

</style>
</head>
<body>

<p class="special">My paragraph</p>

</body>
</html>

开始练习