使用 :nth-child 设置某些单词的样式答案

【问题标题】：Use :nth-child to style certain words使用 :nth-child 设置某些单词的样式
【发布时间】：2016-03-18 09:40:35
【问题描述】：

我可以使用:nth-child 来选择（和设置样式）给定 HTML 元素中的特定单词吗？例如：

<h2 class="site-description">Four word long title</h2>

我想更改样式 -- 更改 前两个 单词的 font-size 和 font-style 并让 后面的两个 自动换行到另一行 --无需更改我无权访问的 HTML。

:nth-child 可以做到这一点吗？

如果这是完全错误的方法，那么还有其他选择可以实现吗？

【问题讨论】：

nth-child 不适用于这种情况。也许:first-word 可以用于第一个词，但如果你想要前两个词，那么 HTML 更改（手动或使用 JS）似乎是不可避免的。
看起来不像，webdesignerhut.com/…
即使 :nth-child 确实以文本节点为目标，在此示例中您也只有一个文本节点，而不是四个。

【解决方案1】：

不，它不适用于:nth-child

因为 nth-child 仅适用于子标签而不适用于字符串字符

如果您无法更改 html，请尝试使用 jquery - 或者参考这个

如果你可以编辑html，你可以试试这个：

用 span 分隔字符并在该 span 上应用 css

希望有帮助

【讨论】：

【解决方案2】：

nth-child 正在应用一个 html 标签。

这里只有一个 html 标签。可能的方法是创建一个小的 js 函数或为每个单词添加一个 html 标签。我会使用 javascript 解决方案。

否则，如果您愿意接受另一个库，可以使用http://letteringjs.com/。

【讨论】：