HTML 使用 Class 与 ID 的差异

HTML 使用 Class 与 ID 的差异

基本概念

Class

• 标签：class="classname"

• 用法：可以应用于多个HTML元素

• 功能：用于定义一组元素的样式或行为

ID

• 标签：id="idname"

• 用法：一个页面中应该唯一

• 功能：用于标识特定元素的样式或行为

主要差异

1. 唯一性：

• ID 在一个HTML文档中应该是唯一的

• Class 可以应用于多个元素

2. CSS选择器：

• ID 使用 # 前缀：#idname

• Class 使用 . 前缀：.classname

3. JavaScript访问：

• ID 可以通过 document.getElementById() 直接访问

• Class 需要通过 document.getElementsByClassName() 或 document.querySelectorAll() 访问

4. 优先级：

• ID 选择器比 Class 选择器具有更高的CSS优先级

用法示例

HTML

<div id="header" class="main-header">网站标题</div>
<p class="text-content main-text">段落内容</p>
<p class="text-content">另一个段落</p>

CSS

/* ID选择器 */
#header {
  background-color: blue;
}

/* Class选择器 */
.main-header {
  font-size: 24px;
}

.text-content {
  color: #333;
}

.main-text {
  font-weight: bold;
}

CSS扩展功能

1. 组合选择器：

   /* 同时具有两个class的元素 */
   .text-content.main-text {
     border-bottom: 1px solid #000;
   }

2. 后代选择器：

   /* ID为container内的所有class为item的元素 */
   #container .item {
     margin: 10px;
   }

3. 属性选择器：

   /* 包含特定class的元素 */
   [class*="text"] {
     line-height: 1.5;
   }

4. 伪类选择器：

   /* class为button的元素在悬停时的样式 */
   .button:hover {
     background-color: #555;
   }

5. 媒体查询中的使用：

   @media (max-width: 600px) {
     .main-header {
       font-size: 18px;
     }
     #header {
       padding: 10px;
     }
   }