Javascript 使用CSS或JS将单词中的字母定位为改变颜色？

我想知道是否有一种更快的方法来写这样的东西：

<span class="brandname"><span style="color: #0399f0">Company</span>Name</span> <span class="tagline">TagLine</span> 

CompanyName标语

应该发生的是CompanyName被包装在类

brandname

中，这是一种特定的字体、重量和文本装饰，然后名称（Company）的前半部分（Company）应该是蓝色的，而其余部分是默认的（黑色）。然后Tagline被包装在一个名为

Tagline

的类中，该类显示不同的字体等

有人知道我是否可以使用类

brandname

来定位CompanyName的前半部分。正在寻找一种为将来保存击键的方法

我觉得我现在这样做会影响搜索引擎优化。我在谷歌上的大部分搜索结果都是2012-2014年的链接……我猜第N封信仍然不存在，但值得一提的是另一封

---

谢谢你的帮助

我以前也遇到过同样的问题。不幸的是，我找不到CSS唯一的解决方案

然后我偶然发现了。这使用jQuery来设置n-选择器的样式

/*
#用js做的每件事#
##第n-##
：第n个字母
：n个字
##最后实施-##
：最后一句话
：最后一封信
##首先实施-##
：第一个字（快于：第n个字（1））
##有用的东西##
为每个单数字母添加悬停效果
.className:n个字母（奇数）：悬停{}
将悬停效果添加到：before/：after
.className:n个字母（奇数）：悬停：在{}之后
##不起作用和不起作用的事情##
.类名：前：第n个字母
阅读更多：https://css-tricks.com/a-call-for-nth-everything/
*/
（函数（$）{
/*jshint loopfunc:true，onevar:true*/
/*全局jQuery:true，浏览器：true*/
$.fn.nthEverything=函数（）{
var styleSuffix=“-nthever”，
cssPattern=/\s*（.*？）\s*{（.*？\}/g，
cssComments=/\s*（？！您可以仅执行类似于此CSS的操作，但在这种情况下，您必须以其他颜色向CSS部分添加所需的内容：

HTML:

Name标语

CSS:

我本人仍然更喜欢使用两个跨度元素的解决方案

工作小提琴：
ooh！使用
内容：“公司”
非常棒，我从来没有想过，谢谢。有什么特别的原因让你更喜欢2 span元素而不是这个吗？我知道我正在尝试保存击键，但如果2 span元素是更好的方法，我宁愿坚持使用它而不是写糟糕的代码，你知道我的意思吗？我只想在html部分保留内容，因为它是如果其他人看了你的代码或者你不得不修改内容，你会更容易理解和阅读。另一件事是，它对搜索引擎优化不友好（如果我理解正确，搜索引擎优化对你很重要）哦，老兄，我一直认为这样使用span会导致SEO问题，但用CSS的方式做会更糟。谢谢吐温！我会继续使用2 span风格来避免SEO冲突。这对我来说肯定更重要。感谢你的时间！哦，这非常聪明。谢谢。这可能就是其中一个！谢谢！请检查a中的链接nswer到原始代码笔链接。它有各种实现的演示。
.brandname::before {
  content: "Company ";
  color: #0399f0;
}