CSS“单词”选择器？ [复制]答案

【问题标题】：CSS "word" selector? [duplicate]CSS“单词”选择器？ [复制]
【发布时间】：2014-11-13 14:05:50
【问题描述】：

是否可以通过 css 选择和设置特定单词的样式？示例案例：

<div>Roses are red violets are blue. This is red that is blue.</div>

并且某种类型的样式会使该句子中的所有red 单词变为红色；以及那句话中的所有blue 单词都是蓝色的。

编辑：我找到了这个页面，它以某种方式工作。不确定它是如何工作的（某些元素是彩色的——如何？） http://www.regexr.com/

【问题讨论】：

我不这么认为。 CSS 关于 html 元素，文字是 textNode。但我不确定。只有通过javascript搜索
抱歉，没有想到。 CSS 将选择器应用于元素，而不是单个文本节点。不过，你可以使用一些漂亮的 JavaScript 来做到这一点。
@danko 我已经做过了，这就是为什么你会在这里看到这个问题。
@Katana314：扫描整个页面的单词如何？将<span>s 添加到 HTML 然后应用 CSS 是唯一明智的做法 - 当然，如果可能的话。
@DanMan 这是个好问题。您应该向建议扫描整个页面以查找单词的人询问。

标签： html css

【解决方案1】：

不，这是不可能的。您必须为此使用 javascript。

【讨论】：

这是正确的答案。

【解决方案2】：

对不起，我不相信这是可能的。你必须像这样添加一些 CSS：

<div>
    Roses are 
    <span style="color:#f33">red</span>
    violets are 
    <span style="color:#36f">blue</span>.
    This is 
    <span style="color:#f33">red</span>
    that is
    <span style="color:#36f">blue</span>.
</div>

或者您可以为每种颜色创建一个类，如下所示（在 HTML 文件的头部部分中，或者如果您想在多个页面上使用它，则将其放在单独的文件中）

<style>.red { color:#f33; } .blue { color:#36f; }</style>

然后使用这段代码：

<div>
    Roses are
    <span class="red">red</span>
    violets are
    <span class="blue">blue</span>.
    This is 
    <span class="red">red</span>
    that is 
    <span class="blue">blue</span>.
</div>

【讨论】：

【解决方案3】：

不，仅使用 CSS 是不可能的。你可以使用 Javascript 或 jQuery 来实现你想要的：

您搜索 div 的内容以尝试找到诸如“红色”、“蓝色”之类的词
您将 span 与 class="color" 包裹在单词周围
您将样式应用于 CSS 中的该跨度

【讨论】：

【解决方案4】：

使用 class="redword" 在单词 red 周围添加一个跨度，并使用 css 定位它

 <span class="redword">red</span>
 <span class="blueword">blue</span>
 .redword{color:red;}.blueword{color:blue;}

【讨论】：