HTML class属性的作用是什么？何时应使用该属性？

核心作用 #

class是HTML元素的属性，本质是给一组元素打上统一的标识标签，让你能通过CSS或JavaScript，一次性控制所有带这个标签的元素，不用逐个操作。

具体用途 #

1. 批量统一样式
   这是class最常用的场景。比如你给出的例子里，<h2>、<img>、<p>都加了hunger-games类，写CSS时只需要：

   .hunger-games {
     color: #d93a3e; /* 统一设置文字/图片边框颜色为火焰红 */
     margin-bottom: 1rem; /* 统一设置底部间距 */
   }
   

   所有带这个类的元素都会自动应用这些样式，不用分别给每个h2、img、p写重复代码，修改时也只改一处就能同步所有元素。

2. 批量控制交互行为
   用JavaScript处理页面交互时，class能帮你快速选中一组元素。比如想给所有hunger-games类的元素加点击事件：

   document.querySelectorAll('.hunger-games').forEach(element => {
     element.addEventListener('click', () => {
       // 点击时执行的操作，比如弹出提示
       alert('这是饥饿游戏相关内容');
     });
   });
   

适合使用的场景 #

• 多元素需要相同样式/行为：就像你的例子，不同类型的元素（标题、图片、段落）属于同一个主题，需要统一视觉风格或交互逻辑，用class把它们归为一组。
• 样式复用：比如网站里所有按钮都要相同的圆角、背景色，给它们加btn类，后续新增按钮直接加这个类就能复用样式，不用重复写CSS。
• 多样式组合：一个元素可以同时加多个class，比如<p class="hunger-games highlight">，这样它既拥有hunger-games的主题样式，又能叠加highlight的高亮样式，灵活组合不同样式模块。

结合你的例子的直观效果 #

假设你给hunger-games类写了这样的CSS：

.hunger-games {
  font-family: 'Roboto', sans-serif;
}
.hunger-games {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

你的标题会用Roboto字体，图片会带圆角和阴影，段落也会用Roboto字体，所有元素的风格统一，维护起来特别方便。

内容的提问来源于stack exchange，提问作者Madison Bogle