CSS 元素选择器

Begindev 编辑部 March 25, 2026

元素选择器用于直接定位 HTML 元素并对其应用样式。

1. 理解元素选择器

元素选择器是 CSS 选择器中最基本的类型。它们根据元素名称（即标签名）来定位 HTML 元素。

例如，p 选择器会选中 HTML 文档中的所有 <p>（段落）元素，而 h1 选择器会选中所有 <h1>（一级标题）元素。

1.1 语法

语法非常简单：只需使用元素名称作为选择器。

elementname {
  property: value;
}

解析：

elementname：你想要设置样式的 HTML 元素的名称（例如：p, h1, div, span, img）。
{}：花括号包含将应用于所选元素的 CSS 规则。
property：你想要修改的 CSS 属性（例如：color, font-size, margin）。
value：你想要分配给属性的值（例如：red, 16px, 10px）。

2. 元素选择器的实战示例

让我们看一些实际例子来说明元素选择器是如何工作的。

2.1 示例 1：设置段落样式

要将所有段落(<p>)的颜色更改为蓝色，你可以使用以下 CSS：

p {
  color: blue;
}

现在，<p> 标签内的任何文本在浏览器中都将显示为蓝色。

2.2 示例 2：设置标题样式

要将所有 <h1> 标题的字体大小更改为 24 像素：

h1 {
  font-size: 24px;
}

页面上所有的 <h1> 标题现在都将具有 24 像素的字体大小。

2.3 示例 3：设置图片样式

要为所有 <img> 元素添加边框：

img {
  border: 1px solid black;
}

这将为页面上的每张图片添加 1 像素的黑色实线边框。

2.4 示例 4：设置 `body` 元素样式

body 元素选择器通常用于为整个页面设置默认样式，例如背景颜色或字体系列。

body {
  background-color: #f0f0f0; /* 浅灰色背景 */
  font-family: Arial, sans-serif;
}

这将整个页面的背景颜色设置为浅灰色，并将默认字体设置为 Arial（如果 Arial 不可用，则使用无衬线字体）。

2.5 示例 5：设置 `<a>` (锚点) 元素样式

锚点元素（即链接）使用 a 选择器进行样式设置。你可以更改它们的颜色、去掉下划线等。

a {
  color: green;
  text-decoration: none; /* 移除下划线 */
}

这将使所有链接变为绿色并移除默认的下划线。

3. 优先级 (Specificity) 与元素选择器

虽然元素选择器很简单，但重要的是要了解它们在优先级方面如何与其他类型的选择器相互作用。优先级决定了当多个规则针对同一个元素时，应用哪个 CSS 规则。

元素选择器具有较低的优先级。 这意味着如果一个更具体的选择器（如类选择器或 ID 选择器，我们将在稍后的课程中介绍）也针对同一个元素，那么由更具体的选择器定义的样式将优先应用。

例如，考虑以下 CSS：

p {
  color: blue;
}
.highlight {
  color: red;
}

以及以下 HTML：

<p>这是一个普通段落。</p>
<p class="highlight">这个段落被高亮显示。</p>

第一个段落将是蓝色的，因为它只被 p 元素选择器选中。
第二个段落将是红色的，因为它同时被 p 元素选择器和 .highlight 类选择器选中。类选择器具有更高的优先级，因此它的 color: red 规则覆盖了 p 选择器的 color: blue 规则。

4. 嵌套与元素选择器

元素选择器可以与其他选择器组合（我们将在后续课程中介绍）以针对特定上下文中的元素。这被称为嵌套或后代选择。

例如，要仅定位 <div> 元素内部的段落，你可以使用以下 CSS：

div p {
  font-size: 14px;
}

此规则仅适用于作为 <div> 元素后代的 <p> 元素。不在 <div> 内的段落将不受影响。

使用元素选择器的最佳实践

用于基本的、通用的样式：元素选择器最适合用于设置常见 HTML 元素的默认样式（Base Styles）。
避免用于复杂的样式：对于更具体和有针对性的样式，请使用类或 ID 选择器。过度使用元素选择器会使你的 CSS 难以维护，并可能导致意外的样式冲突。
考虑优先级：注意元素选择器在优先级方面如何与其他选择器相互作用。
用它们建立基准：元素选择器非常适合为整个文档建立基准样式。例如，为 body 元素设置默认字体和大小。