如何为标题中的每个符号设置样式

Question

我正在玩弄样式符号，并想尝试通过为字母之间的每个点设置实际 FRIENDS 徽标的颜色来设置此标题的样式。我想知道最好的方法是什么。可以在 HTML 中更改符号颜色吗？如果是，那么使用不同 ID 制作 p 标签是设置点样式的唯一方法吗？这是标题：

<header> F&#8226;R&#8226;I&#8226;E&#8226;N&#8226;D&#8226;S </header>

注意：我只想使用 HTML 和 CSS，而不是 Javascript 或 JQuery

Answer 1

我建议您使用<span> 标记围绕每个符号，并使用“id”单独定位它。

看起来像这样： <header> F<span id="red">•</span>R<span id="blue">•</span>I&<span id="green">#8226;</span>E<span id="yellow">•</span>N<span id="orange">•</span>D<span id="brown">•</span>S </header>

您不希望使用<p> 标记来设置符号样式，因为它们会在每个字母之间创建新行。

Answer 2

只需将每个稍后或所需的符号放入 span 标记并使用类或内联样式属性对其进行着色，如代码中最后两个后者所示。

.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
.brown{
color: brown;
}
.orange{
color: orange;
}

<header> <span class="red">F</span>•<span class="green">R</span>•<span class="brown">I</span>•<span class="blue">E</span>•<span style="color:yellow">D</span>•<span style="color:gray">S</span> </header>

Answer 3

您可以使用具有class 属性的span 标记并根据类的CSS 规则（可以重复使用）

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.orange {
  color: orange;
}

.brown {
  color: brown;
}

<header> F<span class="red">•</span>R<span class="blue">•</span>I<span class="green">•</span>E<span class="yellow">•</span>N<span class="orange">•</span>D<span class="brown">•</span>S </header>