基于元素文本的 CSS 选择器？ [复制]答案

【问题标题】：CSS selector based on element text? [duplicate]基于元素文本的 CSS 选择器？ [复制]
【发布时间】：2011-07-23 10:29:36
【问题描述】：

有没有办法根据元素文本在css中选择一个元素？

即：

li[text=*foo]

<li>foo</li>
<li>bar</li>

这可能行不通。

编辑：也只需要支持Chrome即可。

【问题讨论】：

【解决方案1】：

我知道这不是您正在寻找的，但也许它会对您有所帮助。

你可以尝试使用 jQuery 选择器:contains()，添加一个类，然后为一个类做一个普通的样式。

【讨论】：

这对我有用。最终使用了类似的东西：$("div:contains('Text')") .closest("div.parent_div") .css("background", "#555");
@dineshygv 不，不应将其标记为答案。该问题要求使用 CSS 选择器。这个答案是一个完全不同的 jQuery 选择器，它增加了使用 jQuery 的依赖。正确的 CSS 选择器不需要任何特殊的库，只需符合浏览器的 CSS 和 DOM 标准。
令人难以置信的是，这在 Rails 单元测试中有效assert_select '.text-muted:contains("Total Raised")', 'Total Raised'。 guides.rubyonrails.org/v5.0/testing.html#testing-views 我没想到会这样，因为我认为单元测试使用的是 Ruby CSS 选择器，而不是 JQuery。

【解决方案2】：

不直接用CSS，你可以根据内部内容通过JavaScript设置CSS属性，但最终还是需要在CSS的定义中操作。

【讨论】：

【解决方案3】：

可能已经讨论过了，但从 CSS3 开始，就没有你需要的东西了（另见“Is there a CSS selector for elements containing certain text?”）。您将不得不使用额外的标记，如下所示：

<li><span class="foo">some text</span></li>
<li>some other text</li>

然后按照通常的方式引用它：

li > span.foo {...}

【讨论】：