CSS Id 和 Class 选择器学习笔记

一、概述

在 CSS 中，id 和 class 选择器是用于为 HTML 元素指定样式的强大工具。它们可以帮助我们精确地控制页面中元素的样式，让页面设计更加灵活和高效。

二、id 选择器

1. 定义和使用

• 定义：id 选择器用于为具有特定 id 属性的 HTML 元素指定样式。在 CSS 中，id 选择器以 # 开头。

• 示例：

  HTML复制

  <p id="para1">这是一个段落。</p>

  预览

  css复制

  #para1 {
    text-align: center;
    color: red;
  }

  在这个例子中，id="para1" 的段落会居中显示，并且文字颜色为红色。

2. 注意事项

• id 属性的值在文档中必须是唯一的，即一个 id 只能用于一个元素。

• id 属性的值不能以数字开头，否则在 Mozilla/Firefox 浏览器中可能不起作用。

三、class 选择器

1. 定义和使用

• 定义：class 选择器用于描述一组元素的样式。与 id 选择器不同，class 可以在多个元素中使用。在 HTML 中，class 选择器以 class 属性表示，在 CSS 中，类选择器以 . 开头。

• 示例：

  HTML复制

  <p class="center">这是一个段落。</p>
  <div class="center">这是一个 div 元素。</div>

  预览

  css复制

  .center {
    text-align: center;
  }

  在这个例子中，所有拥有 class="center" 的 HTML 元素都会居中显示。

2. 特定元素的 class 使用

• 你可以指定特定的 HTML 元素使用 class。例如，只为 <p> 元素应用某个样式：

  HTML复制

  <p class="center">这是一个段落。</p>

  预览

  css复制

  p.center {
    text-align: center;
  }

  在这个例子中，只有 <p> 元素会应用 center 类的样式。

3. 多个 class 的使用

• 一个元素可以拥有多个 class，这些 class 之间用空格分隔。

• 示例：

  HTML复制

  <p class="center color">这是一个段落。</p>

  预览

  css复制

  .center {
    text-align: center;
  }
  .color {
    color: #ff0000;
  }

  在这个例子中，段落会居中显示，并且文字颜色为红色。

4. 注意事项

• 类名的第一个字符不能使用数字，否则在 Mozilla 或 Firefox 中可能不起作用。