HTML类属性

HTML类属性是HTML标签中的一个属性，用于为标签定义一个或多个类。类可以用于CSS样式表中的选择器，以及JavaScript中的操作。

语法

类属性使用class关键字，其值为一个或多个类名，类名之间用空格隔开。

<tagname class="class1 class2 class3">...</tagname>

注意：类名不应包含任何空格或特殊字符。

应用

CSS样式表中的选择器

可以使用类选择器来选择具有相同类的多个元素，并应用相同的样式。

.class1 {
  color: red;
}

.class2 {
  font-size: 16px;
}

.class3 {
  background-color: yellow;
}

/* 选择所有具有class1类的元素 */
.class1 {
  ...
}

/* 选择同时具有class1和class2类的元素 */
.class1.class2 {
  ...
}

/* 选择同时具有class1和class2或class3类的元素 */
.class1.class2,
.class1.class3 {
  ...
}

JavaScript中的操作

JavaScript可以通过类名来操作HTML元素。

// 获取具有class1类的第一个元素
var element = document.querySelector('.class1');

// 获取具有class2类的所有元素
var elements = document.querySelectorAll('.class2');

示例

<h1 class="title">HTML类属性</h1>
<p class="description">HTML类属性是HTML标签中的一个属性，用于为标签定义一个或多个类。</p>

<style>
  .title {
    color: blue;
    font-size: 24px;
  }

  .description {
    color: gray;
    font-size: 16px;
  }
</style>