一行中的多色文本答案

【问题标题】：Multi-Colored Text in one line一行中的多色文本
【发布时间】：2019-10-08 18:50:11
【问题描述】：

我正在尝试制作具有多种颜色的标题，我已经找到了一种方法，但我对它不太满意。我希望它位于属性或 h1 元素上，带有文本和多种颜色

这是我一直在使用的

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

#super {
  color: #FF6447;
  text-shadow: 2px 2px #000000;
}

#bone {
  color: #FFB951;
  text-shadow: 2px 2px #000000;
}

#craft {
  color: #FFF547;
  text-shadow: 2px 2px #000000;
}

<div class="header">
  <a id="super">SUPER</a><a id="bone">BONE</a><a id="craft">CRAFT</a>
</div>

【问题讨论】：

我不明白你的问题是什么
也许对你有用stackoverflow.com/questions/39884260/…
stackoverflow.com/questions/21654928/… 也许？

标签： html css

【解决方案1】：

不太清楚你在追求什么，但如果你希望字体颜色基于一个属性，你可以使用data。这种方法而不是使用 id 的好处是，如果需要，您可以使用 Javascript 轻松设置/获取值或元素。

另外，您应该使用span 标签而不是a。

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

span[data-color] {
  text-shadow: 2px 2px #000000;
}

span[data-color="super"] {
  color: #FF6447;
}

span[data-color="bone"] {
  color: #FFB951;
}

span[data-color="craft"] {
  color: #FFF547;
}

<div class="header">
  <span data-color="super">SUPER</span><span data-color="bone">BONE</span><span data-color="craft">CRAFT</span>
</div>

【讨论】：

【解决方案2】：

试试这个：

#someID {
  text-shadow: 2px 2px #000000;
}

.super {
  color: #FF6447;
}

.bone {
  color: #FFB951;
}

.craft {
  color: #FFF547;
}

<div class="header">
  <a id="someID"><span class="super">SUPER</span><span class="bone">BONE</span><span class="craft">CRAFT</span></a>
</div>

在这种情况下，您只有一个a 标签。

【讨论】：