CSS id 和 class

CSS id 和 class 的区别

id和class是 CSS 中用于选择元素的两种常用方式，但它们在用法和特性上有显著差异。

• id具有唯一性，一个页面中相同的 id 只能出现一次，通常用于标识特定元素。
• class可以重复使用，适用于多个具有相同样式的元素。

id 的语法和用法

id 选择器以#开头，后跟 id 名称。在 HTML 中，通过id属性指定。

<div id="header">This is a header</div>

#header { background-color: blue; color: white; }

class 的语法和用法

class 选择器以.开头，后跟 class 名称。在 HTML 中，通过class属性指定。

<p class="highlight">This text is highlighted.</p> <p class="highlight">This is also highlighted.</p>

.highlight { background-color: yellow; }

优先级比较

在 CSS 中，id 选择器的优先级高于 class 选择器。如果两者同时应用于同一元素，id 的样式会覆盖 class 的样式。

#unique { color: red; /* 优先级更高 */ } .common { color: blue; }

适用场景

• 使用id的场景：

  • 需要唯一标识某个元素（如页面布局中的主要区块）。
  • 需要通过 JavaScript 精确操作特定元素。

• 使用class的场景：

  • 需要为多个元素应用相同样式。
  • 需要组合多个样式类以实现复用。

组合使用

id 和 class 可以同时应用于一个元素，但 id 应保持唯一。

<div id="main-content" class="container highlight"></div>

#main-content { width: 80%; } .container { margin: 0 auto; } .highlight { border: 1px solid #ccc; }

总结

• id用于唯一标识，优先级高，适合特定元素。
• class用于样式复用，适合多个元素共享样式。
• 合理使用两者可以提高代码的可维护性和灵活性。