如何为HTML的h1标题设置多色？颜色不显示问题求助

你的代码存在两处关键错误导致颜色不生效：

错误1：CSS类选择器缺失前缀 #

所有颜色类的CSS选择器没有添加.前缀，CSS中类选择器必须以.开头才能匹配HTML元素的class属性。

错误2：HTML标签属性错误 #

其中一个<span>标签错误使用了color="colorDarkRed"自定义属性，而非标准的class="colorDarkRed"，导致该段文本无法绑定对应样式。

修正后的HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Why are you here?</title>
    <link rel="stylesheet" href="Akari.css">
</head>
<body>
    <div>
        <h1>
            <span class="colorRed">Ak</span>
            <span class="colorDarkRed"> a</span>
            <span class="colorDarkOrange">ri -</span>
            <span class="colorRed">Play</span>
            <span class="colorDarkRed">st</span>
            <span class="colorGreen">ation</span>
            <span class="colorDarkOrange">3 V</span>
            <span class="colorOrange">SH</span>
            <span class="colorOrange">Me</span>
            <span class="colorYellow">nu</span>
        </h1>
    </div>
    <div class="main">
        <p>test</p>
    </div>
    <div class="navbar">
        <a href="../index.html">Back to home</a>
    </div>
</body>
</html>

修正后的CSS代码 #

body {
    margin: 0;
    background-color: rgb(0, 0, 0);
    background-image: url(../images/channels4_banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}
a:link {
    color: rgb(126, 70, 156);
    text-decoration: none;
}
a:visited {
    color: rgb(126, 70, 156);
}
a:hover {
    color: rgb(255, 255, 255);
}
a:active {
    color: purple;
}

.navbar {
    background-color: rgb(52, 51, 51);
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-radius: 10px;
    opacity: 90%;
}
.navbar a {
    float: left;
    display: block;
    color: rgb(126, 70, 156);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
.navbar a:hover {
    background-color: grey;
    color: rgb(55, 37, 58);
    transition: background-color 1s, color 1s;
}
.navbar a.active {
    color: white;
}

h1 {
    background-color: rgb(126, 70, 156);
    opacity: 40%;
}
.colorRed {
    color: red;
}
.colorDarkRed {
    color: rgb(169, 4, 4);
}
.colorGreen {
    color: green;
}
.colorDarkOrange {
    color: rgb(162, 107, 4);
}
.colorOrange {
    color: orange;
}
.colorYellow {
    color: yellow;
}

main {
    
}

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