我们使用选择器来定位想要用 CSS 样式化的 HTML 元素。这是通过将声明与网页中的元素关联起来实现的。

四种基本选择器是：

1. 元素
2. 类（Class）
3. ID
4. 通用选择器

元素选择器

我们使用元素选择器通过标签名称来选择 HTML 元素。例如，我们在 HTML 页面中有一个段落文本，如下所示：

1<p>我的段落</p>

使用 CSS，我们可以选择这个 p 元素并对其进行任意样式设置。例如，我们可能希望将文字颜色改为红色。

可以通过使用 p 选择器来定位该元素。实现这一效果的简单 CSS 规则如下：

注意： 此规则会选中网页中所有的 p 标签。因此，如果有多个段落，它们都会变成红色。

我们可以使用类和 ID 来选择特定的段落，这将在下一节中讨论。

类和 ID

每个 HTML 元素都有两个常用于将样式关联到特定元素的属性：class 和 id 属性。它们的用法相似，但有一个根本区别：在 HTML 文档中，同一个 class 值可以在多个元素上重复使用，而 id 值只能使用一次。换句话说，当我们需要为一个元素指定两个或更多特定类名时，应使用类。

在 CSS 中，我们用圆点（.）表示类，用井号（#）表示 ID。 让我们看一个例子：

需要注意的是，ID 选择器不能重复使用。严格来说，我们应该优先考虑使用标签名、语义化的 HTML5 元素，或者伪类，再决定是否使用 ID。

通用选择器

星号（*）会选择所有元素。以下示例将设置网页中所有元素的背景颜色：

1* {
2    background-color: yellow;
3}

这也可以用来设置 <div> 元素内所有元素的样式，如下所示：

1div * {
2    background-color: yellow;
3}

通用选择器常被用作一种技巧，清除浏览器默认设置的内边距或外边距：

1* {
2    margin: 0;
3    padding: 0;
4}

然而，这会给生产代码增加不必要的负担，不推荐使用。

连接多个选择器

我们已经学习了如何使用 class 或 id 来为目标 HTML 元素设置样式。

接下来看看如何通过用逗号分隔多个选择器，实现更精确的样式控制：

上述代码中，我们将 p 和 span 元素组合在一起。

为了提高 CSS 代码的可读性，我们可以像下面这样格式化声明（可选）：

1p,
2.city {
3  color: #14288A;
4}