带有 id 和 class 的 CSS 元素

在 CSS 中，我们可以使用 id 和 class 两种选择器来选择 HTML 元素。

ID 选择器

ID 选择器选择具有特定 ID 属性的 HTML 元素。ID 属性在 HTML 中是唯一的。

以下是 ID 选择器的语法：

#id {
  /* CSS 样式 */
}

其中，id 是元素的 ID 属性值，CSS 样式 是要应用的 CSS 样式。

例如，我们有一个 HTML 元素如下：

<div id="my-element">Hello, World!</div>

如果我们想为这个元素添加样式，可以这样写 CSS：

#my-element {
  color: red;
  font-size: 24px;
}

这样，这个元素就变成了红色且字体大小为 24px。

Class 选择器

Class 选择器选择具有特定 class 属性的 HTML 元素。一个元素可以有多个 class。

以下是 Class 选择器的语法：

.class {
  /* CSS 样式 */
}

其中，.class 是元素的 class 属性值，CSS 样式 是要应用的 CSS 样式。

例如，我们有一个 HTML 元素如下：

<div class="my-class">Hello, World!</div>

如果我们想为这个元素添加样式，可以这样写 CSS：

.my-class {
  color: blue;
  font-size: 18px;
}

这样，这个元素就变成了蓝色且字体大小为 18px。

ID 和 Class 的区别

ID 选择器和 Class 选择器的最大区别就是，ID 属性在 HTML 中是唯一的，每个元素只能有一个 ID，而 Class 属性可以在一个 HTML 文档中多次使用。

因此，ID 选择器主要用于选择某个唯一元素，而 Class 选择器主要用于选择一组具有相同样式的元素。在 CSS 中，Class 选择器的优先级高于 ID 选择器。

总之，使用 ID 和 Class 选择器可以有效地控制 HTML 元素的样式。需要注意的是，应该避免使用过于复杂的选择器，以提高网页的性能和易维护性。