如何使用 CSS 为多个标签设置不同的颜色-html教程-PHP中文网

如何使用 CSS 为多个标签设置不同的颜色

DDD

发布： 2025-08-26 17:46:17

原创

605人浏览过

如何使用 css 为多个 标签设置不同的颜色标签设置不同的颜色" />

本文介绍了使用 CSS 为多个 标签设置不同颜色的几种方法。主要涵盖了使用 ID 选择器、类选择器以及内联样式三种方式，并分别阐述了其优缺点和适用场景，旨在帮助开发者灵活运用 CSS 实现个性化的文本样式控制。

在 HTML 文档中，我们经常需要对多个 标签应用不同的样式，例如不同的颜色。CSS 提供了多种方式来实现这一目标，以下将介绍三种常用的方法：使用 ID 选择器、类选择器和内联样式。

使用 ID 选择器

ID 选择器允许你为页面中具有唯一 ID 的元素应用样式。每个 ID 在一个 HTML 文档中只能使用一次。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
<style>
#paragraph1 {
  color: red;
}

#paragraph2 {
  color: blue;
}

#paragraph3 {
  color: green;
}
</style>
</head>
<body>

<p id="paragraph1">This is the first paragraph.</p>
<p id="paragraph2">This is the second paragraph.</p>
<p id="paragraph3">This is the third paragraph.</p>

</body>
</html>

登录后复制

在这个例子中，我们为每个 标签分配了唯一的 ID（paragraph1、paragraph2、paragraph3），然后在 CSS 中使用 # 符号加上 ID 名称来定义每个段落的颜色。

优点： 简单直观，易于理解。

缺点： 由于 ID 的唯一性限制，不适用于需要重复使用的样式。如果需要大量不同的样式，会造成 CSS 代码冗余。不适合用于动态生成的内容，因为需要动态生成唯一的 ID。

使用类选择器

类选择器允许你为具有相同类名的元素应用相同的样式。一个元素可以拥有多个类名。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
<style>
.red-text {
  color: red;
}

.blue-text {
  color: blue;
}

.green-text {
  color: green;
}
</style>
</head>
<body>

<p class="red-text">This is the first paragraph.</p>
<p class="blue-text">This is the second paragraph.</p>
<p class="green-text">This is the third paragraph.</p>

<p class="red-text">This is another red paragraph.</p>

</body>
</html>

登录后复制

在这个例子中，我们定义了三个类（red-text、blue-text、green-text），分别对应不同的颜色。然后，我们将这些类应用到相应的 标签上。注意，一个 标签只能选择一个颜色，如果想组合样式，可以应用多个类。

钛投标

钛投标 | 全年免费 | 不限字数 | AI标书智写工具

157

查看详情

优点： 可以重复使用样式，更灵活，代码更简洁。

缺点： 需要预先定义好所有的类，当样式数量很多时，需要维护大量的类名。

使用内联样式

内联样式直接在 HTML 元素中使用 style 属性来定义样式。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<body>

<p style="color:red;">This is the first paragraph.</p>
<p style="color:blue;">This is the second paragraph.</p>
<p style="color:green;">This is the third paragraph.</p>

</body>
</html>

登录后复制

在这个例子中，我们直接在每个 标签的 style 属性中定义了颜色。

优点： 简单直接，适用于只需要应用一次的样式。

缺点： 可维护性差，不利于代码的重用和组织。会使 HTML 代码变得臃肿，不推荐在大型项目中使用。