CSS id 和 class 选择器

在 CSS 中，`id`选择器和`class`选择器都是用于选择特定的 HTML 元素并为其应用样式的重要方式，但它们之间存在一些关键的区别。

一、`id`选择器

1. 定义方式：

   - `id`选择器以“#”开头，后面跟着唯一的`id`名称。例如：`#my-id`。

   - 在 HTML 中，一个元素只能有一个唯一的`id`属性值。

2. 用法示例：

#my-id {
     color: red;
     font-size: 18px;
   }

 <p id="my-id">This paragraph has a unique id.</p>

  这段 CSS 代码会将具有`id="my-id"`的`<p>`元素的文本颜色设置为红色，字体大小设置为 18 像素。

3. 特点：

   - `id`选择器具有唯一性，在整个 HTML 文档中，一个`id`值应该只被使用一次，以确保准确地选择特定的元素。

   - 通常用于选择页面******定的、唯一的元素，比如页面的主要标题、导航栏中的特定元素等。

二、`class`选择器

1. 定义方式：

   - `class`选择器以“.”开头，后面跟着类名。例如：`.my-class`。

   - 在 HTML 中，一个元素可以有多个`class`属性值，通过空格分隔。

2. 用法示例：

 .my-class {
     background-color: blue;
     font-weight: bold;
   }

<p class="my-class">This paragraph has a class.</p>
   <div class="my-class another-class">This div also has the class.</div>

 上述 CSS 代码会将具有`class="my-class"`的元素的背景颜色设置为蓝色，并将字体设置为粗体。在 HTML 中，一个`<p>`元素和一个`<div>`元素都应用了这个类，它们都会具有相应的样式。

3. 特点：

   - `class`选择器可以被多个元素共享，用于为具有相同特征或用途的元素应用相同的样式。

   - 更加灵活，可以根据需要为不同的元素组合应用多个类，实现更复杂的样式设计。

三、选择优先级

当同时使用`id`选择器和`class`选择器为同一个元素设置样式时，`id`选择器的优先级更高。但在实际开发中，应该尽量避免过度依赖优先级来解决样式冲突，而是通过合理的 CSS 结构和命名规范来确保样式的正确应用。

例如：

#my-id {
  color: red;
}
.my-class {
  color: blue;
}

<p id="my-id" class="my-class">This paragraph has both an id and a class.</p>

在这个例子中，`<p>`元素的文本颜色将是红色，因为`id`选择器的优先级高于`class`选择器。