如何用CSS实现多个不同颜色与样式的h1标题？

你的代码存在几个关键问题，导致无法实现多个h1呈现不同颜色的效果：

1. CSS样式被覆盖 #

你在内部<style>里重复定义了多次h1选择器，CSS规则中相同优先级的选择器，后声明的样式会覆盖先声明的。所以所有h1最终只会应用最后一条h1 {color : purple}的样式，前面设置的红、橙、黄等颜色全部被覆盖。

2. HTML标签错误 #

• 所有<h1>标签未正确闭合，应该用</h1>结尾，而非重复写<h1>
• HTML规范里，<h1>作为块级标题元素，不能嵌套<p>、<pre>这类块级元素，这种非法嵌套会导致浏览器解析异常，样式渲染混乱

3. 冗余的外部CSS文件 #

你引入的heading.css仅定义了h1的border和width属性，和颜色样式不冲突，但没必要拆分到外部文件，可合并到内部样式中统一管理

修复后的代码示例 #

HTML部分 #

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Headings!</title>
    <style>
        /* 统一设置h1的基础样式 */
        h1 {
            border: 0 none blue;
            width: 1000px;
            background: blue;
        }
        /* 给每个h1定义独立类名，指定不同文字颜色 */
        .heading-red { color: red; }
        .heading-orange { color: orange; }
        .heading-yellow { color: yellow; }
        .heading-green { color: green; }
        .heading-blue { color: blue; }
        .heading-purple { color: purple; }
        /* 用CSS实现缩进效果，替代嵌套p标签 */
        .text-indent { text-indent: 300px; }
        /* 用CSS实现保留换行的效果，替代嵌套pre标签 */
        .pre-format { white-space: pre; }
    </style>
</head>
<body>
    <h1 class="heading-red">This is a heading using h1</h1>
    <h1 class="heading-orange text-indent">This is a heading using h1</h1>
    <h1 class="heading-yellow pre-format">This is a heading using h1</h1>
    <h1 class="heading-green">This is a heading using h1</h1>
    <h1 class="heading-blue">This is a heading using h1</h1>
    <h1 class="heading-purple">This is a heading using h1</h1>
</body>
</html>

核心修改说明 #

• 给每个h1添加专属类名，通过类选择器单独设置颜色，彻底避免样式覆盖问题
• 移除h1内部的非法嵌套标签，改用CSS属性实现缩进、格式保留效果，符合HTML语义规范
• 合并基础样式，减少冗余代码
• 修复所有标签的闭合错误

另外补充：你提到的“不建议使用多个h1标签”是符合HTML语义化标准的，页面通常仅保留一个顶级h1作为主标题，其余内容用h2-h6层级区分。但如果是特殊视觉需求，上述代码可以满足你的效果。

内容的提问来源于stack exchange，提问作者elfuegoeggo