我们可以将 CSS 选择器分为五类：

• 简单选择器（根据名称、id、类选择元素）
• 组合器选择器（选择 元素基于它们之间的特定关系）
• 伪类选择器（根据特定状态选择元素）
• 伪元素选择器（选择 并设置元素的一部分样式）
• 属性选择器（根据 属性或属性值）

CSS 元素选择器

p {
  text-align: center;
  color: red;
}

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器 习惯于 选择一个独特的元素！要选择具有特定 id 的元素，请编写哈希 （#） 字符，后跟元素的ID。注意：ID 名称不能以数字开头！

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

CSS 类选择器

类选择器选择具有特定类属性的 HTML 元素。要选择具有特定类的元素，请编写句点 （.） 字符，后跟类名。

所有带有class=“center”的HTML元素都将是红色的，并且居中对齐：

.center {
  text-align: center;
  color: red;
}

只有 class=“center” 的 <p> 元素将是 红色和居中对齐：

p.center {
  text-align: center;
  color: red;
}

网页元素 也可以指多个类。在下面的例子里，<p> 元素将根据 class=“center” 设置样式 和 to class=“large”：

CSS 通用选择器

通用选择器 （*） 选择所有 HTML 元素。

* {
  text-align: center;
  color: blue;
}

CSS 分组选择器

分组选择器选择具有相同样式的所有 HTML 元素 定义。查看以下 CSS 代码（h1、h2 和 p 元素具有相同的 样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组，以最小化代码。要对选择器进行分组，请用逗号分隔每个选择器。

在这个例子中，我们从上面的代码中对选择器进行了分组：

h1, h2, p {
  text-align: center;
  color: red;
}