单词中的特定字母样式[重复]答案

【问题标题】：Style specific letters in a word [duplicate]单词中的特定字母样式[重复]
【发布时间】：2013-03-19 21:48:44
【问题描述】：

我当前的 HTML：

<a href="#" id="word">T<span style="font-size: 28px;">est</span><span style="color: pink;">W<span style="font-size: 28px;">ord</span></span></a>

这对 SEO 来说太糟糕了。理想情况下，我希望对锚标记完成所有样式：

<a href="#" id="word">TestWord</a>

我知道有一个 :first-letter 选择器，但我如何修改 nth 字母并获得预期的输出？

jsFiddle: http://jsfiddle.net/HUGKv/1/

【问题讨论】：

标签： html css seo

【解决方案1】：

目前无法通过 CSS 定位 n-th letter。有人呼吁 CSS 在未来允许 n-th 一切，但截至今天，没有这样的运气。

目前，您可能不得不使用一些 JS 方法来解决这个问题。

【讨论】：

【解决方案2】：

棘手的，是的，但更快乐的 SEO，还有：

<h1>TestWord</h1>

h1 {
    color: pink;
}
h1:before {
    content: "Test";
    position: absolute;
    left: 8px;
    color: red;   
}

【讨论】：

【解决方案3】：

使用单个字母所需的 CSS 添加 span 元素。

<a href="#" id="word">Test<span class="classname">W</span>ord</a>

【讨论】：

对于 SEO 来说，这比他使用 inline-css 的方法更好吗？
这并不能真正解决 OP 的问题。这只是用类名替换了内联样式（我怀疑这只是为了演示目的）。 OP 想要的是一种在他的文字中不包含任何 <span> 元素的方法，而是直接通过 CSS 定位特定字母。
它确实将样式与内容分开。在这方面它更好。我不知道 :fifth-letter CSS 选择器。
你说得对，这稍微好一点。但是，OP 所指的问题并不是将样式与内容混合在一起。他的问题是搜索引擎优化。因此，这个答案并没有真正回答问题。